Action Bar Component

Action Bar

Experimental React ID: actionbar Figma ID: action_bar

Action bar contains a collection of horizontally aligned buttons.

Usage

Use an action bar to render multiple buttons in a row. Buttons can be split into groups by adding a divider. When there is not enough space, buttons that don't fit will be added to an overflow menu.

Anatomy

Action bar with buttons, divider, and overflow menu

Content

Buttons

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

Only use buttons in an action bar.

Don't use other components in an action bar.

Button Types

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

Don't mix types of button labels within the same action bar.

Options

Size

Action bars can have 3 different sizes:

Small (28px)

Medium (32px) - Default