---
title: Button Group
desc: The QBtnGroup Vue component groups QBtn and QBtnDropdown into a single unit.
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 horizontally to all available space
- `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) *(added v2.7.6)*
  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

```vue
<template>
  <div class="q-pa-md 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>
```

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

### Spread horizontally

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

### With QBtnDropdown

```vue
<template>
  <div class="q-pa-md">
    <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>
  </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.