Button Group     

You can conveniently group QBtn and QBtnDropdown using QBtnGroup. Be sure to check those component’s respective pages to see their props and methods.

Installation

Edit /quasar.conf.js:

framework: {
components: [
'QBtnGroup',
'QBtn', // if using QBtn
'QBtnDropdown' // if using QBtnDropdown
]
}

Basic usage

Simple group of three buttons:

<q-btn-group>
<q-btn label="One" @click="clickHandler1"/>
<q-btn label="Two" @click="clickHandler2"/>
<q-btn label="Three" @click="clickHandler3"/>
</q-btn-group>

Simple group of three push buttons:

<q-btn-group push>
<q-btn push label="One" @click="clickHandler1" />
<q-btn push label="Two" @click="clickHandler2" />
<q-btn push label="Three" @click="clickHandler3" />
</q-btn-group>

Simple group of three outlined buttons:

<q-btn-group outline>
<q-btn outline label="One" @click="clickHandler1" />
<q-btn outline label="Two" @click="clickHandler2" />
<q-btn outline label="Three" @click="clickHandler3" />
</q-btn-group>

Vue Properties

Vue PropertyTypeDescription
outlineBooleanSet true, if you want an outlined button.
flatBooleanSet true, if you want a flat button.
pushBooleanSet true, if the button should have a push effect.
roundedBooleanSet true, if the square button should have rounded corners.

You must use these props on both the parent QBtnGroup and the children QBtn/QBtnDropdown.

More examples

Simple group of three rounded buttons

<q-btn-group rounded>
<q-btn rounded label="One" @click="clickHandler1" />
<q-btn rounded label="Two" @click="clickHandler2" />
<q-btn rounded label="Three" @click="clickHandler3" />
</q-btn-group>

Simple group of three flat buttons

<q-btn-group flat>
<q-btn flat label="One" @click="clickHandler1" />
<q-btn flat label="Two" @click="clickHandler2" />
<q-btn flat label="Three" @click="clickHandler3" />
</q-btn-group>

Simple group of two rounded buttons and one rounded dropdown button:

<q-btn-group rounded>
<q-btn rounded color="primary" label="One" />
<q-btn rounded color="primary" label="Two" />
<q-btn-dropdown rounded color="primary" label="Three" split>
<!-- dropdown content goes here -->
<q-list link>
<q-item v-close-overlay>
<q-item-side icon="folder" inverted color="primary" />
<q-item-main>
<q-item-tile label>Photos</q-item-tile>
<q-item-tile sublabel>February 22, 2016</q-item-tile>
</q-item-main>
<q-item-side right icon="info" color="amber" />
</q-item>
<q-item-separator inset />
<q-list-header inset>Files</q-list-header>
<q-item v-close-overlay>
<q-item-side icon="assignment" inverted />
<q-item-main>
<q-item-tile label>Vacation</q-item-tile>
<q-item-tile sublabel>February 22, 2016</q-item-tile>
</q-item-main>
<q-item-side right icon="info" color="amber" />
</q-item>
</q-list>
</q-btn-dropdown>
</q-btn-group>