Toolbar

Usage

Overview

Toolbar is a compact floating strip of actions—usually contextual to a selection in cards or lists—that appears without occupying permanent header space. It follows the platform selection-toolbar pattern: icon-forward, limited count, and overflow into a menu when necessary. Dispatch uses it in admin lists, QA surfaces, and bulk-action flows where actions should surface only when a selection exists.

When to use

Bulk actions on selected rows or cards (approve, tag, export).
Contextual formatting or quick operations tied to a specific object.
Scenarios that need exclusiveGroup so concurrent selections don't produce overlapping toolbars.

When not to use

Full-width page-level actions—use PageHeader or a page toolbar.
Primary global navigation—use Sidebar.
More than a handful of actions without overflow—operators can't scan crowded icon strips.

Content guidelines

Toolbar aria-label describes purpose ("Incident actions"); each Button has a tooltip and accessible name via formatMessage.
Destructive actions live inside an overflow menu and go through a confirmation downstream.

Behavior and states

Visibility. Hide the toolbar when selection clears. Animate entry and exit respectfully with prefers-reduced-motion.
Disabled actions. Disable actions that violate selection rules and explain the reason in a tooltip.
Placement. Z-index must not cover critical incident indicators operators watch continuously.

Best practices

Cap visible icons at roughly three to five before moving extras into an overflow menu.
Place destructive actions behind the overflow menu and require confirmation.

Don't

Duplicate the same actions in both the page header and the toolbar without a reason.
Let the toolbar cover text fields operators are actively editing.

Accessibility

Toolbars are keyboard navigable; focus order does not jump unpredictably when the toolbar appears or dismisses. Sufficient contrast for the floating background in both themes. See Accessibility for the full contract.

Icon button for toolbar actions.
Menu for overflow.
Data table for selection integration patterns.

Tool / Accessibility

Toolbar / API and Development

On this page

Toolbar

Usage

Overview

When to use

Bulk actions on selected rows or cards (approve, tag, export).
Contextual formatting or quick operations tied to a specific object.
Scenarios that need exclusiveGroup so concurrent selections don't produce overlapping toolbars.

When not to use

Full-width page-level actions—use PageHeader or a page toolbar.
Primary global navigation—use Sidebar.
More than a handful of actions without overflow—operators can't scan crowded icon strips.

Content guidelines

Toolbar aria-label describes purpose ("Incident actions"); each Button has a tooltip and accessible name via formatMessage.
Destructive actions live inside an overflow menu and go through a confirmation downstream.

Behavior and states

Visibility. Hide the toolbar when selection clears. Animate entry and exit respectfully with prefers-reduced-motion.
Disabled actions. Disable actions that violate selection rules and explain the reason in a tooltip.
Placement. Z-index must not cover critical incident indicators operators watch continuously.

Best practices

Cap visible icons at roughly three to five before moving extras into an overflow menu.
Place destructive actions behind the overflow menu and require confirmation.

Don't

Duplicate the same actions in both the page header and the toolbar without a reason.
Let the toolbar cover text fields operators are actively editing.

Accessibility

Icon button for toolbar actions.
Menu for overflow.
Data table for selection integration patterns.

Tool / Accessibility

Toolbar / API and Development

On this page