Angular Button Group

New Year sale. Skyrocket your business in 2025!

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order!
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.

Get offer!

On this page

##### 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.

## Mixed styles

## Outlined styles

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

## 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.

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.

## Sizing Alternatively, of implementing button sizing classes to each button in a group, set `sizing` property to all `<ButtonGroup>`'s, including each one when nesting multiple groups.tly.

## Nesting Put a `<c-dropdown>` with `variant="btn-group"` when you need dropdown menus combined with a series of buttons.

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

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `role` | Default role attr for ButtonGroup. 'group' | `string` | `'group'` | | `size` | Size the component small or large. | ``"sm"`` \| ``"lg"`` | | | `vertical` | Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here. | `boolean` | |

### c-button-toolbar _component_ --- #### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `role` | Default role attr for ButtonToolbar. | `string` | `'toolbar'` |