Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  3. System Message
  5. API and Development

System Message

API and Development

View SourceOpens in a new tabSubmit IssueOpens in a new tab
Import SystemMessage from @prepared911/ui/system-message.
Renders div (default) or li. Takes native div attributes except style, color, event handlers, and the reserved state attributes. tabIndex is allowed only as -1.
PropTypeDefaultNotes
childrenReactNoderequiredThe event, as copy
as"div" | "li""div"Host tag
timestampReactNodePass a Time
animatedbooleanfalseEntry fade and slide
classNamestringAppended after the generated classes
refRef<HTMLElement>Root element
Accessibility copy (aria-label, aria-description, title) is LocalizedMessage. data-* attributes pass through, except the reserved design-system state names.
Exports
SystemMessage, and the types SystemMessageProps and SystemMessageElement.
Props
NameTypeDefaultDescription
childrenReactNode—The event, as copy such as "Call connected". It centers in the line and wraps.
animatedboolean—Fades and slides the line in when it mounts. Defaults to false; a virtualized list should leave it off.
aria-descriptionLocalizedMessage—Extended description for assistive tech.
aria-labelLocalizedMessage | DisplayValue—Accessible name when the visible label is insufficient.
aria-placeholderLocalizedMessage—Hint for an empty control.
as"div" | "li"—Host tag. Defaults to div. Use li when the transcript is a list.
classNamestring—@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
data-alignundefined——
data-checkedundefined——
data-copy-statusundefined——
data-dirtyundefined——
data-disabledundefined——
data-draggingundefined——
data-ending-styleundefined——
data-expandedundefined——
data-filledundefined——
data-focus-visibleundefined——
data-focusedundefined——
data-highlightedundefined——
data-hoveredundefined——
data-indeterminateundefined——
data-instantundefined——
data-invalidundefined——
data-is-newundefined——
data-loadingundefined——
data-nestedundefined——
data-openundefined——
data-orientationundefined——
data-overflowundefined——
data-placeholderundefined——
data-popup-openundefined——
data-pressedundefined——
data-readonlyundefined——
data-requiredundefined——
data-scrollingundefined——
data-selectedundefined——
data-sideundefined——
data-starting-styleundefined——
data-touchedundefined——
data-validundefined——
data-variantundefined——
refRef<HTMLElement>—Ref to the root element.
tabIndex-1—Only -1: a list may focus a line programmatically; a system message is not a tab stop.
timestampReactNode—Time slot, after the text. Pass a Time element holding the localized text so the machine-readable instant stays in dateTime. SystemMessage formats nothing.
titleLocalizedMessage | DisplayValue—Native tooltip; accessibility hint, not visible UI title text.
Storybook
Interactive examples and edge cases for this component are in Storybook.
DefaultOpens in a new tab
Previous
System Message / Usage
Next
System Message / Accessibility
On this page
Exports
Props
Storybook