Use the variant
prop to change the visual aspect of the button group.
Show code
Colors
Use the color
prop to change the color of the button group.
Show code
Disabled
Add the disabled
prop to disable the buttons of the group. The disabled
variant has a higher priority than the color
variant.
Show code
Sizes
Set the size
prop to change the size of the button group.
Show code
Column
Add the column
prop to display the button group in a column layout.
Show code
With icons
Use the <ButtonIcon />
component to display icons in the
button group.
Show code
API
See documentation below for reference to all of the props, classes and CSS
variables (custom properties) available for <ButtonGroup />
: