Button Group

Storybook

Used for grouping buttons that share a relationship or perform similar actions.

Preview

Variants

The alignment and the order of buttons within it can be customized to suit the specific use case.

Start

When aligned to start, the primary button is on the left side of the group.

End

When aligned to end, the primary button is on the right side of the group.

Space-Between

When set to space-between, the elements are evenly distributed within the row, creating a directional flow where the primary button is either on the left (regressive) or on the right (progressive).

Vue API

Slots

Name
Description
default

Default slot for button items

Props

Name
Description
Default
alignment

Alignment of the buttons inside the container

Type: string
'start'
Button Group documentation last updated Thursday, June 11, 2026