Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  3. Toolbar
  5. Usage

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.
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.
Related Components
  • Icon button for toolbar actions.
  • Menu for overflow.
  • Data table for selection integration patterns.
Previous
Tool / Accessibility
Next
Toolbar / API and Development
On this page
Overview
When to use
When not to use
Content guidelines
Behavior and states
Best practices
Accessibility
@prepared911/ui overflow menu
Related Components