Button Group

Basic

• The buttons can be grouped by wrapping them with the ButtonGroup component. They need to be immediate children.

Variants

• Default variant is outline.

Sizes

• Button supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
• Default size is lg.

• With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
xs → xl	0px → 1279px	sm
xl → 3xl	1280px → 1919px	md
3xl → ∞	1920px → ∞	lg

Disabled

• Disabled state can be enabled by setting disabled prop to true.

Loading

• Loading state can be enabled by setting loading prop to true of each button.

Split button

• ButtonGroup can also be used to create a split button. The dropdown can change the button action (as in this example) or be used to immediately trigger a related action.