Button Groups
Group a series of buttons together on a single line or stack them in a vertical column.
Basic example
<ButtonGroup aria-label="Basic example">
<Button variant="primary">Left</Button>
<Button variant="primary">Middle</Button>
<Button variant="primary">Right</Button>
</ButtonGroup>
1
2
3
4
5
6
2
3
4
5
6
Mixed styles
<ButtonGroup aria-label="Basic mixed styles example">
<Button variant="warning">Left</Button>
<Button variant="danger">Middle</Button>
<Button variant="primary">Right</Button>
</ButtonGroup>
1
2
3
4
5
6
2
3
4
5
6
Outlined styles
<ButtonGroup aria-label="Basic outlined example">
<Button variant="primary" outline>Left</Button>
<Button variant="primary" outline>Middle</Button>
<Button variant="primary" outline>Right</Button>
</ButtonGroup>
1
2
3
4
5
6
2
3
4
5
6
You can also make similar result by following way without using outline prop.
Basic checkbox toggle button group
Button toolbar
Combine sets of button groups into button toolbars for more complex components.
<ButtonToolbar aria-label="Toolbar with button groups">
<ButtonGroup class="me-2" aria-label="First group">
<Button variant="primary">1</Button>
<Button variant="primary">2</Button>
<Button variant="primary">3</Button>
<Button variant="primary">4</Button>
</ButtonGroup>
<ButtonGroup class="me-2" aria-label="Second group">
<Button variant="secondary">5</Button>
<Button variant="secondary">6</Button>
<Button variant="secondary">7</Button>
</ButtonGroup>
<ButtonGroup aria-label="Third group">
<Button variant="info">8</Button>
</ButtonGroup>
</ButtonToolbar>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.
<ButtonToolbar class="mb-3" aria-label="Toolbar with button groups">
<ButtonGroup class="me-2" aria-label="First group">
<Button variant="secondary" outline>1</Button>
<Button variant="secondary" outline>2</Button>
<Button variant="secondary" outline>3</Button>
<Button variant="secondary" outline>4</Button>
</ButtonGroup>
<InputGroup>
<InputGroupText>@</InputGroupText>
<Input
placeholder="Input group example"
aria-label="Input group example"
aria-describedby="btnGroupAddon"
/>
</InputGroup>
</ButtonToolbar>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Justified Toolbar
<ButtonToolbar justified aria-label="Toolbar with button groups">
<ButtonGroup aria-label="First group">
<Button variant="secondary" outline>1</Button>
<Button variant="secondary" outline>2</Button>
<Button variant="secondary" outline>3</Button>
<Button variant="secondary" outline>4</Button>
</ButtonGroup>
<InputGroup class="input-group">
<InputGroupText>@</InputGroupText>
<Input
placeholder="Input group example"
aria-label="Input group example"
aria-describedby="btnGroupAddon2"
/>
</InputGroup>
</ButtonToolbar>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Sizing
Instead of applying button sizing to every button in a group, just add size to each button group, including each one when nesting multiple groups.
<div class="mb-2" v-for="size in ['lg',null,'sm']">
<ButtonGroup :size="size" aria-label="Button Group">
<Button outline>Left</Button>
<Button outline>Middle</Button>
<Button outline>Right</Button>
</ButtonGroup>
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Vertical variation
Make a set of buttons appear vertically stacked rather than horizontally by setting the vertical prop. Split button dropdowns are not supported here.
<ButtonGroup vertical>
<Button>Top</Button>
<Button>Middle</Button>
<Button>Bottom</Button>
</ButtonGroup>
1
2
3
4
5
6
2
3
4
5
6
Dropdown menu support
Add <Dropdown> menus directly inside your <ButtonGroup>. Note that split dropdown menus are not supported when prop vertical is set.
<ButtonGroup>
<Button>Button</Button>
<Dropdown right text="Menu">
<DropdownItem>Item 1</DropdownItem>
<DropdownItem>Item 2</DropdownItem>
<DropdownDivider></DropdownDivider>
<DropdownItem>Item 3</DropdownItem>
</Dropdown>
<Dropdown right split text="Split Menu">
<DropdownItem>Item 1</DropdownItem>
<DropdownItem>Item 2</DropdownItem>
<DropdownDivider></DropdownDivider>
<DropdownItem>Item 3</DropdownItem>
</Dropdown>
</ButtonGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| aria-role | String | 'group' | Sets the ARIA attribute `role` to a specific value |
| size | String | Set the size of the component's appearance. 'sm', 'md' (default), or 'lg' | |
| tag | String | 'div' | Specify the HTML tag to render instead of the default tag |
| vertical | Boolean | false | When set, rendered the button group in vertical mode |