---
title: Button Group
related:
  - title: Button
    path: button.md
  - title: Dropdown Button
    path: button-dropdown.md
  - title: Button Toggle
    path: button-toggle.md
---
You can conveniently group [QBtn](button.md) and [QBtnDropdown](button-dropdown.md) using QBtnGroup. Be sure to check those component's respective pages to see their props and methods.

## QBtnGroup API

### Props

- `spread` (boolean, optional)
  Spread to all available space (horizontally; or vertically when the 'vertical' prop is set)
- `vertical` (boolean, optional) *(added v2.34)*
  Stack the buttons vertically instead of side by side
- `outline` (boolean, optional)
  Use 'outline' design for buttons
- `flat` (boolean, optional)
  Use 'flat' design for buttons
- `unelevated` (boolean, optional)
  Remove shadow on buttons
- `rounded` (boolean, optional)
  Applies a more prominent border-radius for squared shape buttons
- `square` (boolean, optional)
  Removes border-radius so borders are squared
- `push` (boolean, optional)
  Use 'push' design for buttons
- `stretch` (boolean, optional)
  When used on flexbox parent, buttons will stretch to parent's height
- `glossy` (boolean, optional)
  Applies a glossy effect

### Slots

- `#default`
  Suggestion: QBtn

## Usage

Example "Various Groups":

```vue
<template>
  <div class="q-gutter-y-md column items-start">
    <q-btn-group push>
      <q-btn push label="First" icon="timeline" />
      <q-btn push label="Second" icon="visibility" />
      <q-btn push label="Third" icon="update" />
    </q-btn-group>

    <q-btn-group push>
      <q-btn
        color="yellow"
        glossy
        text-color="black"
        push
        label="First"
        icon="verified_user"
      />
      <q-btn color="amber" glossy text-color="black" push label="Second" />
      <q-btn color="orange" glossy text-color="black" push label="Third" />
    </q-btn-group>

    <q-btn-group outline>
      <q-btn outline color="brown" label="First" />
      <q-btn outline color="brown" label="Second" icon-right="watch_later" />
      <q-btn outline color="brown" label="Third" />
    </q-btn-group>

    <q-btn-group>
      <q-btn color="secondary" glossy label="First" />
      <q-btn color="secondary" glossy label="Second" />
      <q-btn color="secondary" glossy label="Third" />
      <q-btn color="secondary" glossy label="Fourth" />
    </q-btn-group>

    <q-btn-group>
      <q-btn color="accent" icon="timeline" />
      <q-btn color="accent" icon="visibility" />
      <q-btn color="accent" icon="update" />
    </q-btn-group>

    <q-btn-group rounded>
      <q-btn color="amber" rounded glossy icon="timeline" />
      <q-btn color="amber" rounded glossy icon="visibility" />
      <q-btn color="amber" rounded glossy icon-right="update" label="Update" />
    </q-btn-group>
  </div>
</template>
```

> [!IMPORTANT]
> You must use same design props (flat, outline, push, ...) on both the parent QBtnGroup and the children QBtn/QBtnDropdown.

Example "Spread horizontally":

```vue
<template>
  <q-btn-group spread>
    <q-btn color="purple" label="First" icon="timeline" />
    <q-btn color="purple" label="Second" icon="visibility" />
  </q-btn-group>
</template>
```

Example "With QBtnDropdown":

```vue
<template>
  <q-btn-group rounded>
    <q-btn rounded color="primary" label="One" />

    <q-btn rounded color="primary" label="Two" />

    <q-btn-dropdown auto-close rounded color="primary" label="Three" split>
      <!-- dropdown content goes here -->
      <q-list padding style="width: 250px">
        <q-item clickable>
          <q-item-section avatar>
            <q-avatar icon="folder" color="purple" text-color="white" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Photos</q-item-label>
            <q-item-label caption>February 22, 2016</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="info" color="amber" />
          </q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar icon="folder" color="purple" text-color="white" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Videos</q-item-label>
            <q-item-label caption>London</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="info" color="amber" />
          </q-item-section>
        </q-item>

        <q-separator inset />
        <q-item-label header>Files</q-item-label>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar icon="assignment" color="teal" text-color="white" />
          </q-item-section>
          <q-item-section>
            <q-item-label>London</q-item-label>
            <q-item-label caption>March 1st, 2018</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="info" color="amber" />
          </q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar icon="assignment" color="teal" text-color="white" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Paris</q-item-label>
            <q-item-label caption>January 22nd, 2017</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="info" color="amber" />
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>
  </q-btn-group>
</template>
```

Set the `vertical` prop (v2.34+) to stack the buttons instead of placing them side by side. Every design (flat, outline, push, ...) and a nested split QBtnDropdown work the same way as horizontally. Stacked buttons look best with their content aligned to one side, which is what `align="left"` on each QBtn does. With `spread`, the group fills the height of its parent, so give the parent a height.

Example "Vertical":

```vue
<template>
  <div class="row q-gutter-md items-start">
    <q-btn-group vertical>
      <q-btn color="primary" label="First" align="left" icon="timeline" />
      <q-btn color="primary" label="Second" align="left" icon="visibility" />
      <q-btn color="primary" label="Third" align="left" icon="update" />
    </q-btn-group>

    <q-btn-group vertical push>
      <q-btn push color="amber" text-color="black" glossy label="First" />
      <q-btn push color="amber" text-color="black" glossy label="Second" />
      <q-btn push color="amber" text-color="black" glossy label="Third" />
    </q-btn-group>

    <q-btn-group vertical spread style="height: 200px">
      <q-btn color="deep-orange" label="Spread" />
      <q-btn color="deep-orange" label="Vertically" />
    </q-btn-group>
  </div>
</template>
```

## Accessibility *(v2.25+)*

QBtnGroup is purely presentational: it renders a plain `div` with no ARIA role, and the buttons inside manage their own semantics — each one is its own Tab stop. If the grouping is semantically meaningful (a set of related actions), pass `role="group"` along with an `aria-label` yourself; both fall through to the wrapping element.