Angular Button Group Basic example

Wrap a series of <CButton> components in <c-button-group>.

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

Active link Link Link
Angular Button Group Mixed styles Angular Button Group Outlined styles Angular Button Group Checkbox and radio button groups

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


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

@ @
Angular Button Group Sizing

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



Angular Button Group Nesting

Put a <c-button-group> inside another <c-button-group> when you need dropdown menus combined with a series of buttons.

Angular Button Group Vertical variation

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