React Button Group Component
Button group
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.
React 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 Vue components. To learn more please visit the following pages.
How to use React Button Group Component.#
Wrap a series of <CButton> components in <CButtonGroup>.
Conveying meaning to assistive technologies
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.
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 size property to all <CButtonGroup>'s, including each one when nesting multiple groups.
Nesting#
Put a <CButtonGroup> inside another <CButtonGroup> when you need dropdown menus combined with a series of buttons.
Vertical variation#
Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
API#
Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.