Button Group

Group multiple buttons together on a single line using a button group.

You can group a series of <IButton> components inside a <IButtonGroup> to display them inline, conveying additional meaning.

Size Variants

You're able to use the size modifier to control the size of your button group, using one of the available sizes: sm, md, and lg. The default size is set to md.

Block Variant

You can create block button groups that span the full width of a parent by adding the block property.

Vertical Basic Example

Using the vertical property, you can stack a set of buttons vertically rather than horizontally.

Vertical Size Variants

Just like horizontal button groups, the size of vertical button groups can also be controlled using the size modifier. The default size is set to md.

Vertical Block

Just like horizontal block button groups, you can also set vertical button groups to span full width of its parent by adding the block property.

Nested

When placing a <IButtonGroup> inside another <IButtonGroup>, you'll get a mixed series of buttons that will render seamlessly.

Nested Block

You can also nest block button groups.

Disabled

You can make button groups look inactive or disabled by adding the disabled boolean property.

Props

Slots

Design Tokens