Button bar

The Button bar provides a organized way to present buttons side by side, which will stack up when there's not enough space.

Usage

Code

Accessibility

Delete

Edit

Save

  <sl-button-bar align="center" aria-label="Actions group">
    <sl-button fill="outline" variant="danger"><sl-icon name="far-trash"></sl-icon>Delete</sl-button>
    <sl-button fill="outline" variant="default"><sl-icon name="far-file-pen"></sl-icon>Edit</sl-button>
    <sl-button fill="outline" variant="primary"><sl-icon name="far-floppy-disk"></sl-icon>Save</sl-button>
  </sl-button-bar>

API

Component has a range of properties to define the experience in different use cases.

Properties

Name	Attribute	Type	Default	Description
`align`	`align`	`'start' \| 'center' \| 'end' \| 'space-between' \| undefined`	`'start'`	The alignment of the buttons within the bar.
`fill`	`fill`	`'solid' \| 'outline' \| 'link' \| 'ghost' \| undefined`	`undefined`	Determines the fill of all buttons in the bar.
`reverse`	`reverse`	`boolean \| undefined`	`false`	When set to true, the button order is reversed.
`size`	`size`	`'sm' \| 'md' \| 'lg' \| undefined`	`undefined`	Determines the size of all buttons in the bar.
`variant`	`variant`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warning' \| 'danger' \| 'inverted' \| undefined`	`undefined`	Determines the variant of all buttons in the bar.

Slots

Name	Description
`default`	Buttons to be grouped in the bar.

Interactive example