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 and Not Ready (radio menu); On Break stays in the enum but its row is commented out until the backend set changes. On Call, Ringing and Wrap Up are host-driven, static, and not in the tab order. Hosts map the station statuses Dialing and Busy to ControlIslandStatus.OnCall, so they render as the On Call pill; the enum has no Dialing or Busy member. Ready uses cool green; Not Ready uses the transient surface; On Call and Wrap Up use dusty red; Ringing uses cobalt with a one-time ringingAnnouncement.
Set showStatusIcons={false} to hide the lead glyphs, for agencies that configure their own statuses.
Wrap Up
An interim status your team configures. Add an optional statusItems[ControlIslandStatus.WrapUp] and set status to WrapUp: the pill counts down from wrapUpSeconds (default 15) with the design system's odometer, and goes instant under reduced motion. At 00:00 the island calls onStatusChange(Ready, details) once with ChangeReason.Ended. Set Ready in that handler, or call details.cancel() to stay in Wrap Up.
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
Wrap Up
Raise hand
Drive it from a host or remote
Size
In the Navbar