Button Group

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

Basic Example

You can group a series of <i-button> components inside a <i-button-group> 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 <i-button-group> inside another <i-button-group>, 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.

Configuration

Props

Use props to modify the component’s design and behavior.

• Property

  vertical

  TypeBoolean

  Defaultfalse
  Description Display the button group with vertical orientation
• Property

  block

  TypeBoolean

  Defaultfalse
  Description Display the button group as a block, spanning the full container width
• Property

  disabled

  TypeBoolean

  Defaultfalse
  Description The disabled state of the button group

Slots

Use slots to insert custom content into well-defined component locations.

• Property

  default
  Description Slot for default button group content