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.

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.

Nesting

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

Vertical

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

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.

Block

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

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 Block

You can also nest block button groups.

Component API

Here you can find a list of the various customization options you can use for the button group component as props, as well as available slots.

Sass Variables

Here you can find a list of the Sass variables you can use for the button group components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.