Action Bar
A contextual sticky toolbar for bulk actions on selected items. Appears on selection, displays item count, and provides action buttons with select-all and dismiss controls.
Anatomy
1
2
3
- 1 Count — number of selected items
- 2 Actions — contextual action buttons
- 3 Dismiss — closes the bar and clears selection
Options
Table of options
| Property | Values | Default |
|---|---|---|
| count | number | 0 |
| open | boolean | false |
| label | text | "Bulk actions" |
| dismiss-label | text | "Dismiss" |
Behaviors
Appears on selection
The bar is hidden by default and becomes visible when items are selected (via the is-open class or open attribute).
Sticky positioning
The bar sticks to the bottom of its scroll container so it remains accessible as users scroll through a long list.
Usage guidelines
Show only when items are selected
Do
Display the action bar only when one or more items are selected.
Don't
Don't show the bar when no items are selected — it creates confusion about what the actions apply to.
Content standards
- Use the count to tell users how many items are selected. Prefer "N items selected" for clarity.
- Keep action labels short and verb-first: "Delete", "Export", "Move".
Keyboard interactions
| Key | Behavior |
|---|---|
Tab |
Moves focus through action buttons and dismiss |
Enter / Space |
Activates the focused button |
Escape |
Dismisses the bar (handled by consuming code) |
Accessibility
- The bar uses
role="toolbar"with anaria-labelto describe its purpose. - The dismiss button has an explicit
aria-label. - The count is announced as live text when the bar opens.
- Icons inside the dismiss button are decorative (
aria-hidden="true").
Theming
Action Bar adapts across brands and modes through semantic tokens. Use the hero switches above.
For the full theming architecture see Foundations: Theming.
Design checklist
All brand/mode contextsWorks across light and dark modes.
Accessible use of colorText conveys meaning, not color alone (WCAG 1.4.1).
Sticky positioningBar remains visible while scrolling.
Defined optionsCount, open state, and labels documented.
Usage guidelinesShown only when items are selected.
Design tokensAll visual attributes as tokens.
Keyboard interactionsTab and Enter/Space documented.