Action Bar

Usage

The action bar facilitates performing actions on one or multiple items simultaneously.

Best practices

Do

Use it to provide a layer of actions at the bottom of the page or inside a component, such as table actions or long forms views.

Don't

Do not show more than one action bar at a time.

Do

Be conscious of mobile regarding content and the amount of actions available. Prioritize or place less important actions in a dropdown menu.

Don't

Do not stretch the action bar on bigger viewports nor use the mobile version, instead, display it always in a single line.

Do

Make sure you follow the button’s best practices.

Don't

Do not use any other button than plain, and additionally, primary or danger. Action hierarchy should always have two levels.

Accessibility

General considerations

Some of the considerations to make the action bar accessible require adding ARIA properties to the regions being affected:

• Set aria-live to assertive so updates to the region have the highest priority and should be presented to the user immediately.
• Set aria-atomic to true if you want the entire changed region as a whole to be presented.
• Use aria-busy to indicate that an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.

Examples

Live Preview

Props

Slots