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

Cancel

Save for later

Send

<sl-button-bar align="center" aria-label="Group of actions">
  <sl-button fill="link" variant="default">Cancel</sl-button>
  <sl-button fill="outline" variant="primary">Save for later</sl-button>
  <sl-button fill="solid" variant="primary">Send</sl-button>
</sl-button-bar>

When to use

The Button bar component is typically used in user interfaces where a group of actions can be performed related to a specific context or where the user needs to make a choice between a few options. It's designed to provide a clean and organized way to present buttons side by side, which will stack up when there's not enough space, like on mobile screens. It's handy for things like submitting forms, navigation, or triggering different actions.

Use a button bar instead of "manually", or separately laying out all places where you need multiple actions available to the user. That way you can achieve consistency across your entire application, including different layouts on different viewports.

Here are a few examples:

Form Actions: When you have a form that requires actions like 'Submit', 'Cancel', or 'Reset', a button bar can group these actions together.
Navigation: In cases where you need to guide the user through a multi-step process, like a wizard or a survey, the button bar can be used to navigate between steps with 'Next', 'Previous', or 'Finish' buttons.
Functional Grouping: If there are multiple actions that can be taken on a particular piece of content or a section within a page, such as 'Edit', 'Delete', or 'Save', the button bar will group these actions in a logical and visually cohesive manner.

Anatomy

Item	Name	Description	Optional
1	Button placeholder	A placeholder for an action	yes

Figma Options

With these options you can tweak the appearance of the button bar in Figma. They are available in the Design Panel so you can compose the button to exactly fit the user experience need for the uses case you are working on.

Item	Options	Description
Align	`left` `center` `expand` `right`	Determines the alignment of the buttons
Ghost icon	`boolean`	To show icon only ghost buttons
Size	`sm` `md` `lg`	Determines the size of the buttons
Mobile	`boolean`	Determines if the buttons are stacked up for smaller screens

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	Description
`align`	`align`	`'start' \| 'center' \| 'end' \| 'space-between' \| undefined`	The alignment of the buttons within the bar.
`reverse`	`reverse`	`boolean \| undefined`	When set to true, the button order is reversed.
`size`	`size`	`'sm' \| 'md' \| 'lg' \| undefined`	Determines the size of all buttons in the bar.

Slots

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

CSS Properties

Name	Description
`--sl-button-bar-align`	The alignment of the buttons within the bar. Possible values: `start`, `center`, `end`, `space-between`. By default it is `start`. You can use it eg. for mobile version (together with `--sl-button-bar-direction-row`).
`--sl-button-bar-direction`	The flex direction of the button container.
`--sl-button-bar-vertical`	Vertical (column) direction - you can set <code>--sl-ON</code> or <code>`--sl-OFF`</code> when needed (eg. only for mobile version); by default it is OFF. Some more information can be found in the <a href="https://lea.verou.me/blog/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/" target="_blank">article about using multiple values with one custom property</a>.

WAI-ARIA

Attribute	Value	Description	User suppliedSpecifies whether the attribute is always set in the component (no) or it needs to be provided by the developer (yes)
`aria-label`	string	Provides a label describing the group of buttons wrapped by button bar component. Please remember to add `aria-label` to the icon-only buttons (when used) as well.	no

Interactive example