Button bar

<bolt-button-bar>
  <bolt-button slot="cancel">Cancel</bolt-button>
  <bolt-button slot="back">Back</bolt-button>
  <bolt-button slot="forward" type="solid">Continue</bolt-button>
</bolt-button-bar>

<bolt-button-bar>
  <bolt-button slot="cancel">Cancel</bolt-button>
  <bolt-button slot="forward" type="solid">Continue</bolt-button>
</bolt-button-bar>

<bolt-button-bar>
  <bolt-button slot="forward" type="solid">Continue</bolt-button>
</bolt-button-bar>

<bolt-button-bar>
  <bolt-button slot="cancel">Cancel</bolt-button>
  <bolt-button slot="alternate">Skip step</bolt-button>
  <bolt-button slot="back">Back</bolt-button>
  <bolt-button slot="forward" type="solid">Continue</bolt-button>
</bolt-button-bar>

A button bar with a fixed layout will align the buttons to a .bolt-container grid class, which restricts content to a fixed width at each responsive breakpoint.

(The example below is best viewed at an extra-large breakpoint or higher.)

<bolt-button-bar  layout="fixed">
  <bolt-button slot="cancel">Cancel</bolt-button>
  <bolt-button slot="back">Back</bolt-button>
  <bolt-button slot="forward" type="solid">Continue</bolt-button>
</bolt-button-bar>

• The component is limited to no more than 4 buttons.
• Buttons are arranged using their respective [slot] attributes as demonstrated in "Variations":
  • cancel
  • alternate
  • back
  • forward
• The forward button MUST be type="solid".
• To change the background color of the button bar, add a supported background color class to <bolt-button-bar>.
  • NOTE: If the consumer chooses to overwrite the button's default color, it is up to them to ensure proper color contrast between the buttons and chosen background.
• Do not apply the width property to buttons within the button bar.
  • Button widths are pre-determined and should not be changed.
• The layout optional property, can be used to adjust the button bar layout.
  • Setting layout="fixed" restricts the button bar layout to a fixed width at each responsive breakpoint.
  • layout="fluid" (default) aligns buttons to the left and right edges of the element.
• It it up to consumers to ensure that button labels are concise, such that they fit on screen, horizontally.

• Button bar should be used for page navigation, progress saving, task submission, or task cancellation.
• Only use Buttons following best practices outlined in the Button component.
• Place the Primary Button on the right within a Button bar.
• Be mindful of how multiple Buttons will look and work on small screens.
• Use the default Button size (medium) for a Button bar.
• Buttons in a Button bar should be positioned immediately above a screen's basic Footer.
• Once introduced, a Button bar should persist throughout a task until that task is successfully submitted.
• Unless the focus is on a screen element that requires use, the Enter key on a keyboard can be used to trigger the action associated with the Primary Button in the Button bar.
• If a task requires significant time to complete, using the Button bar's Cancel Button should trigger the display of a modal, asking users to confirm whether they would like to abandon the task.
• Avoid placing content above a Button bar to announce the purpose of the next screen.

The arrangement of Buttons within a Button bar should be as follows:

1. Forward
2. Back
3. Alternate
4. Cancel

1. Cancel
2. Alternate
3. Back
4. Forward

Listed below are common variations of Button bar with suggested labels and positioning.

A screen that allows access to the first screen in a sequence

• Forward Button: "Start"

The first screen in a sequence

• Cancel Button: "Cancel"
• Forward Button: "Continue"

Any step past the first screen in a sequence

• Cancel Button: "Cancel"
• Back Button: "Back"
• Forward Button: "Continue" or "Submit" (last step only)

When users are allowed to save the progress they've made and continue a task at a later time

• Cancel Button: "Cancel"
• Alternate Button: "Save & quit"
• Back Button: "Back"
• Forward Button: "Continue" or "Submit" (last step only)

When users are allowed to skip a step in a multi-step process

• Cancel Button: "Cancel"
• Alternate Button: "Skip this step"
• Back Button: "Back"
• Forward Button: "Continue" or "Submit" (last step only)

• Don't use a Button Bar when applying actions to a selected table cell or list item.
• Consider using Button(s) outside of the Button bar if the action is not related to the progress or status of a task.

• Consider using Checkbox or Switch for togglable states.

• Button labels use sentence case.
• Button labels should clearly describe the function of each button on the Button bar:
  • Cancel: abandon the task at hand and navigate to the initial screen.
  • Alternate: navigate away without consequences (e.g., "Save & quit" or "Skip this step").
  • Back: navigate to the previous screen.
  • Forward: navigate to the next screen, start a process or finalize a process (e.g., "Continue", "Save", "Submit").

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.