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.
- 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.
- 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.
- Toolbar
aria-label describes purpose ("Incident actions"); each IconButton has a tooltip and accessible name via formatMessage.
- Destructive actions live inside an overflow menu and go through a confirmation downstream.
- 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.
Do
- 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.
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.
