Button Group

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

Example

You can group a series of <i-button> components inside a <i-button-group> to display them inline, conveying additional meaning.

Button Group Example

Sizes

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

Button Group Sizes

Nesting

When placing a <i-button-group> inside another <i-button-group>, you'll get a mixed series of buttons.

Button Group Nesting

Vertical

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

Vertical Button Group

Vertical Sizes

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 Button Group Sizes

API

Button Group API <i-button-group>
Property Description Type Accepted Default
disabled Sets the state of the button group component and its child button components to disabled. Boolean true, false false
size Sets the size of the button group component and its child button components. String sm, md, lg md
vertical Sets the direction of the button group component. Boolean true, false false