React Bootstrap Button Group Component
Button Group with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to group buttons using the React Bootstrap Button Group component from CoreUI. Create accessible, styled toolbars and button sets with ease.
How to use React Bootstrap Button Group component#
The React Bootstrap Button Group component allows you to group multiple buttons together into a single toolbar-like unit. Wrap a series of <CButton> components in a <CButtonGroup> to get started.
Ensure the correct role and provide a label
For assistive technologies (e.g. screen readers) to identify a set of buttons as grouped, use role="group" for button groups and role="toolbar" for toolbars.
Always include an accessible label using aria-label or aria-labelledby to clarify the purpose of the group.
React Bootstrap Button Groups can also be applied to a group of links instead of using the CNav component.
Mixed styles in React Bootstrap Button Groups#
Combine buttons with different styles within a single group for more flexible UI designs.
Outlined button styles#
Use variant="outline" on grouped buttons to apply Bootstrap's outline button style across the group.
Checkbox and radio button groups#
Create interactive grouped controls by combining button-style checkboxes and radio buttons inside a React Bootstrap Button Group.
React Bootstrap Button Toolbar#
Group multiple button groups together into a toolbar using <CButtonToolbar>. Combine with layout utilities to control spacing and alignment.
You can also combine input groups with button groups to create interactive toolbars.
Sizing React Bootstrap Button Groups#
Instead of setting size on individual buttons, apply the size prop to the <CButtonGroup> to make all buttons within it uniformly sized.
Nesting button groups#
Nest a <CButtonGroup> inside another to combine dropdowns with standard buttons, as supported in React Bootstrap Button Group usage.
Vertical React Bootstrap Button Groups#
Stack buttons vertically using the vertical variation of React Bootstrap Button Group. Note: split dropdowns are not supported in vertical mode.
API reference#
Explore the API documentation for available props and configuration for the React Bootstrap Button Group component and toolbars.