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.
Reset zoom to 100%
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
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.
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.
@prepared911/ui overflow menu
In @prepared911/ui, set overflowLabel on Toolbar and overflowItem on each ToolbarItem that may move into the menu. The bar measures before paint, keeps leading items that fit beside the trailing "more" control, and lists the rest in the menu in bar order. Place the bar inside NavbarEnd when AppShell must keep header actions reachable at 360px and at 400% zoom. See API and Development for the full props and example.