Button Groups
CoreUI PRO hexagon
Our Admin Panel isn’t just a mix of third-party components. It’s the only Next.js dashboard built on a professional, enterprise-grade UI Components Library. This component is part of this library, and we present only the basic usage of it here. To explore extended examples, detailed API documentation, and customization options, refer to our docs.
React Button Group Basic example

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

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

React Button Group Mixed styles
React Button Group Outlined styles
React Button Group Checkbox and radio button groups

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

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

@
@
React Button Group 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.



React Button Group Nesting

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

React Button Group Vertical variation

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