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.

<i-button-group>
    <i-button>Left</i-button>
    <i-button>Middle</i-button>
    <i-button>Right</i-button>
</i-button-group>

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.

<i-button-group size="sm">
    <i-button>Left</i-button>
    <i-button>Middle</i-button>
    <i-button>Right</i-button>
</i-button-group>

<i-button-group size="md">
    <i-button>Left</i-button>
    <i-button>Middle</i-button>
    <i-button>Right</i-button>
</i-button-group>

<i-button-group size="lg">
    <i-button>Left</i-button>
    <i-button>Middle</i-button>
    <i-button>Right</i-button>
</i-button-group>

Block Variant

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

<i-button-group block>
    <i-button>Left</i-button>
    <i-button>Middle</i-button>
    <i-button>Right</i-button>
</i-button-group>

Vertical Basic Example

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

<i-button-group vertical>
    <i-button>Button 1</i-button>
    <i-button>Button 2</i-button>
    <i-button>Button 3</i-button>
</i-button-group>

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.

<i-button-group vertical size="sm">
    <i-button>Top</i-button>
    <i-button>Middle</i-button>
    <i-button>Bottom</i-button>
</i-button-group>

<i-button-group vertical size="md">
    <i-button>Top</i-button>
    <i-button>Middle</i-button>
    <i-button>Bottom</i-button>
</i-button-group>

<i-button-group vertical size="lg">
    <i-button>Top</i-button>
    <i-button>Middle</i-button>
    <i-button>Bottom</i-button>
</i-button-group>

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.

<i-button-group block vertical>
    <i-button>Left</i-button>
    <i-button>Middle</i-button>
    <i-button>Right</i-button>
</i-button-group>

Nested

When placing a <i-button-group> inside another <i-button-group>, you’ll get a mixed series of buttons that will render seamlessly.

<i-button-group>
    <i-button>Button 1</i-button>
    <i-button-group>
        <i-button>Button 2</i-button>
        <i-button>Button 3</i-button>
    </i-button-group>
</i-button-group>

Nested Block

You can also nest block button groups.

<i-button-group block>
    <i-button>Button 1</i-button>
    <i-button-group block>
        <i-button>Button 2</i-button>
        <i-button>Button 3</i-button>
    </i-button-group>
</i-button-group>

Disabled

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

<i-button-group disabled>
    <i-button>Left</i-button>
    <i-button>Middle</i-button>
    <i-button>Right</i-button>
</i-button-group>

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