CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedCustomize
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedTemplates
  • undefinedMigration
  • undefined
  • undefined
  • undefined
undefinedDownloadundefinedHire Us Get CoreUI PRO

Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Hire Us! We create stunning designs, high-conversion landing pages, functional mobile apps and reliable web services – everything you need to offer your products or services online and always stay a tap away from your customers.
  • Give us a star ⭐️ on Github.

Vue Button Group Component

Vue button group component allows to group a series of buttons and power them with JavaScript.

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React components. To learn more please visit the following pages.

  • Angular Button Group
  • Bootstrap Button Group
  • React Button Group

Basic example #

Wrap a series of <CButton> components in <CButtonGroup>.

<CButtonGroup role="group" aria-label="Basic example">
  <CButton color="primary">Left</CButton>
  <CButton color="primary">Middle</CButton>
  <CButton color="primary">Right</CButton>
</CButtonGroup>
1
2
3
4
5
Ensure the correct role and provide a label #

For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper role attribute has to be provided. For button groups, this should be role="group", while toolbars should have a role="toolbar".

Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we apply aria-label, but options such as aria-labelledby can also be used.

These classes can also be added to groups of links, as an alternative to the <CNav> components.

<CButtonGroup>
  <CButton href="#" color="primary" active>Active link</CButton>
  <CButton href="#" color="primary">Link</CButton>
  <CButton href="#" color="primary">Link</CButton>
</CButtonGroup>
1
2
3
4
5

Mixed styles #

<CButtonGroup role="group" aria-label="Basic mixed styles example">
  <CButton color="danger">Left</CButton>
  <CButton color="warning">Middle</CButton>
  <CButton color="success">Right</CButton>
</CButtonGroup>
1
2
3
4
5

Outlined styles #

<CButtonGroup role="group" aria-label="Basic outlined example">
  <CButton color="primary" variant="outline">Left</CButton>
  <CButton color="primary" variant="outline">Middle</CButton>
  <CButton color="primary" variant="outline">Right</CButton>
</CButtonGroup>
1
2
3
4
5

Checkbox and radio button groups #

Combine button-like checkbox and radio toggle buttons into a seamless looking button group.

<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
  <CFormCheck :button="{color: 'primary', variant: 'outline'}" id="btncheck1" autocomplete="off" label="Checkbox 1"/>
  <CFormCheck :button="{color: 'primary', variant: 'outline'}" id="btncheck2" autocomplete="off" label="Checkbox 2"/>
  <CFormCheck :button="{color: 'primary', variant: 'outline'}" id="btncheck3" autocomplete="off" label="Checkbox 3"/>
</CButtonGroup>
1
2
3
4
5
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
  <CFormCheck type="radio" :button="{color: 'primary', variant: 'outline'}" name="btnradio" id="btnradio1" autocomplete="off" label="Radio 1" checked/>
  <CFormCheck type="radio" :button="{color: 'primary', variant: 'outline'}" name="btnradio" id="btnradio2" autocomplete="off" label="Radio 2"/>
  <CFormCheck type="radio" :button="{color: 'primary', variant: 'outline'}" name="btnradio" id="btnradio3" autocomplete="off" label="Radio 3"/>
</CButtonGroup>
1
2
3
4
5

Button toolbar #

Join sets of button groups into button toolbars for more complicated components. Use utility classes as needed to space out groups, buttons, and more.

<CButtonToolbar role="group" aria-label="Toolbar with button groups">
  <CButtonGroup class="me-2" role="group" aria-label="First group">
    <CButton color="primary">1</CButton>
    <CButton color="primary">2</CButton>
    <CButton color="primary">3</CButton>
    <CButton color="primary">4</CButton>
  </CButtonGroup>
  <CButtonGroup class="me-2" role="group" aria-label="Second group">
    <CButton color="secondary">5</CButton>
    <CButton color="secondary">6</CButton>
    <CButton color="secondary">7</CButton>
  </CButtonGroup>
  <CButtonGroup class="me-2" role="group" aria-label="Third group">
    <CButton color="info">8</CButton>
  </CButtonGroup>
</CButtonToolbar>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Feel free to combine input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities through to space items correctly.

@
@
<CButtonToolbar class="mb-3" role="group" aria-label="Toolbar with button groups">
  <CButtonGroup class="me-2" role="group" aria-label="First group">
    <CButton color="secondary" variant="outline">1</CButton>
    <CButton color="secondary" variant="outline">2</CButton>
    <CButton color="secondary" variant="outline">3</CButton>
    <CButton color="secondary" variant="outline">4</CButton>
  </CButtonGroup>
  <CInputGroup>
    <CInputGroupText>@</CInputGroupText>
    <CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
  </CInputGroup>
</CButtonToolbar>
<CButtonToolbar class="justify-content-between" role="group" aria-label="Toolbar with button groups">
  <CButtonGroup class="me-2" role="group" aria-label="First group">
    <CButton color="secondary" variant="outline">1</CButton>
    <CButton color="secondary" variant="outline">2</CButton>
    <CButton color="secondary" variant="outline">3</CButton>
    <CButton color="secondary" variant="outline">4</CButton>
  </CButtonGroup>
  <CInputGroup>
    <CInputGroupText>@</CInputGroupText>
    <CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
  </CInputGroup>
</CButtonToolbar>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Sizing #

Alternatively, of implementing button sizing classes to each button in a group, set size property to all <CButtonGroup>'s, including each one when nesting multiple groups.



<CButtonGroup size="lg" role="group" aria-label="Large button group">
  <CButton color="dark" variant="outline">Left</CButton>
  <CButton color="dark" variant="outline">Middle</CButton>
  <CButton color="dark" variant="outline">Right</CButton>
</CButtonGroup>
<br/>
<CButtonGroup role="group" aria-label="Default button group">
  <CButton color="dark" variant="outline">Left</CButton>
  <CButton color="dark" variant="outline">Middle</CButton>
  <CButton color="dark" variant="outline">Right</CButton>
</CButtonGroup>
<br/>
<CButtonGroup size="sm" role="group" aria-label="Small button group">
  <CButton color="dark" variant="outline">Left</CButton>
  <CButton color="dark" variant="outline">Middle</CButton>
  <CButton color="dark" variant="outline">Right</CButton>
</CButtonGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Nesting #

Put a <CDropdown> inside <CButtonGroup> when you need dropdown menus combined with a series of buttons.

ActionAnother actionSomething else here
Separated link
<CButtonGroup role="group" aria-label="Button group with nested dropdown">
  <CButton color="primary">1</CButton>
  <CButton color="primary">2</CButton>
  <CDropdown variant="btn-group">
    <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>
</CButtonGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Vertical variation #

Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

<CButtonGroup vertical role="group" aria-label="Vertical button group">
  <CButton color="dark">Button</CButton>
  <CButton color="dark">Button</CButton>
  <CButton color="dark">Button</CButton>
  <CButton color="dark">Button</CButton>
  <CButton color="dark">Button</CButton>
  <CButton color="dark">Button</CButton>
  <CButton color="dark">Button</CButton>
</CButtonGroup>
1
2
3
4
5
6
7
8
9
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
<CButtonGroup vertical role="group" aria-label="Vertical button group">
  <CButton color="primary">Button</CButton>
  <CButton color="primary">Button</CButton>
  <CDropdown variant="btn-group">
    <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>
  <CButton color="primary">Button</CButton>
  <CButton color="primary">Button</CButton>
  <CDropdown variant="btn-group">
    <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>
  <CDropdown variant="btn-group">
    <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>
  <CDropdown variant="btn-group">
    <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>
</CButtonGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<CButtonGroup vertical role="group" aria-label="Vertical button group">
  <CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio1" autocomplete="off" label="Radio 1" checked/>
  <CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio2" autocomplete="off" label="Radio 2"/>
  <CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio3" autocomplete="off" label="Radio 3"/>
</CButtonGroup>
1
2
3
4
5

API #

CButtonGroup #

import { CButtonGroup } from '@coreui/vue'
// or
import CButtonGroup from '@coreui/vue/src/components/button-group/CButtonGroup'
1
2
3

Props #

Prop nameDescriptionTypeValuesDefault
sizeSize the component small or large.string'sm', 'lg'-
verticalCreate a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.boolean-
On this page
  • Basic example
  • Mixed styles
  • Outlined styles
  • Checkbox and radio button groups
  • Button toolbar
  • Sizing
  • Nesting
  • Vertical variation
  • API
    • CButtonGroup
  • GitHub
  • Twitter
  • CoreUI (Vanilla)
  • CoreUI for Angular
  • CoreUI for React.js

CoreUI for Vue is Open Source UI Components Library for Vue.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.