Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. System Message
  3. Usage

System Message

Usage

SystemMessage is the centered line in a transcript for an event that is not a person's message: someone joined, someone left, the call connected, a note from the system. It is plain caption text at the subtle tier, with no side rule and no surface, so it never reads as the caller or the agent speaking. An optional time follows the text. It is a container, not an overlay: it never portals, and it carries no role or live region. The scroll container that holds the transcript owns the log role.
SystemMessage formats nothing. A Time with format and no children writes the instant in the locale and time zone of the nearest LocaleProvider, 24-hour by default (ADR 0024).
When to use
  • A participant joined or left, the call connected or ended, a call was transferred, or translation turned on.
  • Any event the transcript should show in order but that no participant said.
When not to use
  • Something a person said: use Message, including for an automated agent's reply.
  • A notice that needs attention or an action: use Alert or Banner.
  • A date divider or an unread marker: those are structure around the transcript, not events in it.
Layout
The line is centered in the inline axis. Alignment uses logical properties, so a right-to-left page keeps it centered with no extra rule. Long text wraps onto balanced, centered lines and breaks anywhere, so an unbroken string never overflows. The time sits after the text, 4px away, and wraps to its own centered line before it is cut. The line owns no space above or below it, and its block padding is the same on both sides. Inside MessageList it sits 24px from the item before and the item after, whatever they are. Stacked by hand, put the space on the container. The text sits 8px from the list edge.
Slots
SlotPropNotes
TextchildrenRequired. Copy such as "Call connected"
TimetimestampPass a Time element holding the localized text. SystemMessage formats nothing
Host and composition
  • as="li" when the transcript is a list. The caller owns the list and its role="list".
  • It does not compose Message. A system line has no author, side, rule, or delivery state, and sharing the component would put those props in front of a caller who must not use them. It shares Message's spacing numbers instead, and a browser test holds them equal.
  • Pass animated for a fade and slide on mount. Leave it off in a virtualized list, so rows do not replay on scroll.
Props the root drops
The root is a container. It drops style, every on* handler, and the reserved state attributes. tabIndex is allowed only as -1, so a list can move focus to a line.
Previous
Switch / Accessibility
Next
System Message / API and Development
On this page
When to use
When not to use
Layout
Slots
Host and composition
Props the root drops