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.

CancelSave for laterSend
<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>

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.


1Button placeholderA placeholder for an actionyes

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.

Alignleft center expand rightDetermines the alignment of the buttons
Ghost iconbooleanTo show icon only ghost buttons
Sizesm md lgDetermines the size of the buttons
MobilebooleanDetermines if the buttons are stacked up for smaller screens
Interactive example