ActionBar

A collection of horizontally aligned IconButtons. The IconButtons can be split into groups by adding a divider. When there is not enough space, IconButtons that don't fit will be added to an overflow menu.

Page navigation navigation

Anatomy

Content

Buttons

Buttons are the only controls allowed in an ActionBar. Even though a SegmentedControl is technically a group of buttons, it does not belong in an ActionBar because it's used for selecting an option, not triggering an action.

Buttons that open Dialogs, ActionMenus or SelectPanels are acceptable in an ActionBar becacuse they perform an action: to open a new context.

Don’t

All buttons in an ActionBar should have the same type of content (icon, text label, or text label with icon).

Use either icons or text labels, but not both in the same ActionBar.

Don’t

Button variants

IconButtons should default to the invisible (no border/background) variant. Buttons with text labels should default to the secondary variant.

You may use the danger variant for destructive actions. The primary variant should not be used in an ActionBar because primary page actions are highly unlikely to appear in a collection with other actions.

States

Button states

Buttons in ActionBars are solely used for triggering actions. Consider using a SegmentedControl when a button should have a selected state.

Buttons in ActionBars have a hover and pressed state, and a focused state when using a keyboard to navigate.

Don’t

Tooltips

When hovering over a button, a tooltip will appear that describes the action.

Describe what action will be taken when clicking on the button.

Don’t

Layout

ActionBars can be used inline next to other content or also full width taking up the entire space.

Spacing

Make sure to add extra spacing around the ActionBar when it's nested in a bordered component.

Extra padding of at least 8px (var(--stack-padding-condensed)) should be added when nesting an ActionBar in a bordered component.

Don’t