Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Blocks
  3. Control Island
  5. Usage

Control Island

Usage

Import @prepared911/ui/blocks/control-island from its subpath. Load @prepared911/ui/styles.css once at the document root.
ControlIsland is the raised pill at the start of the Navbar. It carries the person's role, queue or channel scope, raise-hand control, and (for Call taker) availability. Pass the roles the person may use; the island renders an Expanding ButtonGroup with per-role content.
The raise hand control draws raiseHandIcon while the hand is down and raisedHandIcon while it is raised. The design pairs the outlined hand (hand-alt-outlined) with the filled hand (hand-alt-filled); leave raisedHandIcon out to keep one glyph in both states.
Pass every role the person may work in through roles. The island renders one Expanding ButtonGroup; operator content opens beside the selected role segment.
Roles
Pass only the roles the person may use, in order. Effective role is role ?? defaultRole ?? roles[0].role. One role still renders expanded. Several roles share one Expanding ButtonGroup with accent fill on the selected segment.
Supervisor content is the badge only. Call taker adds queue label, dot, raise hand, and optional availability. Dispatcher adds channel label, dot, and raise hand.
Availability
Omit availability on Call taker to hide the status pill. Choosable statuses are Ready, On Break, and Not Ready (radio menu). On Call and Ringing are host-driven, static, and not in the tab order. Ready uses cool green; On Call uses dusty red; Ringing uses cobalt with a one-time ringingAnnouncement. On Break and Not Ready use transient fills and differ by glyph and label.
Raise hand
Toggle Button with aria-pressed, controlled or uncontrolled via raisedHand / defaultRaisedHand.
Drive it from a host or remote
The island keeps no cross-remote state. A host or remote that owns the person's presence passes it in as controlled props and writes back from the handlers.
  • Derive On Call and Ringing from call state each render. They are never user choices, so onStatusChange cannot overwrite them, and the person's last choice returns when the call ends.
  • Leave out status and raisedHand to let the island hold the value, and pass defaultStatus or defaultRaisedHand for the first value (Ready and lowered by default).
  • Cancel the change details to refuse a change, for example when the host rejects it.
  • Supervisor content has no raise hand and no status pill; Call taker has both, Dispatcher has raise hand only.
Size
Defaults to Medium (40px island, 30px pills). See the package usage.md for the size table.
In the Navbar
Place the island in NavbarStart after the brand. See Composition stories for full-header examples.
Previous
Takeover dialog / Accessibility
Next
Control Island / API and Development
On this page
Roles
Availability
Raise hand
Drive it from a host or remote
Size
In the Navbar