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). Wrap Up is host-driven but opens the same menu. On Call and Ringing 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; On Break and Not Ready use 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. The pill opens the status menu with no row checked; a row pressed during Wrap Up is held as the status the countdown ends in, and is dropped if the status leaves Wrap Up first. At 00:00 the island calls onStatusChange(next, details) once with ChangeReason.Ended, where next is the pick, or Ready when nothing was picked. Set next in that handler, or call details.cancel() to stay in Wrap Up. After 00:00 the pick is cleared, and a row pressed while the status is still Wrap Up is reported at once with ChangeReason.ItemPress.
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