Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  3. Tokenized Text
  5. Usage

Tokenized Text

Usage

TokenizedText is a message body with structured tokens inside the run: links, mentions, search highlights, and redactions. The caller passes a structured value, never markup, so nothing is parsed as HTML. It renders inside a Message as its content, and it is not the composer's removable Token (CORE-1035): a chip you can delete and a word in a sent message are different components.
When to use
  • A message whose body has links, people or units named in it, search matches, or ranges removed for privacy.
  • A transcript line that is built from a parsed message, such as one with a mention syntax.
When not to use
  • A removable chip in a text field: use Token.
  • A message with nothing but text: pass the string to Message as children.
  • Rich text from an editor: convert it to segments first. TokenizedText never takes HTML or Markdown.
Segments
KindFieldsRenders
TexttextA text node of the root. React escapes it, so <b> shows as characters
Linktext, hrefLink. A link with an unsafe protocol (javascript:, data:) is plain text, not a disabled link
Mentiontext, nameThe visible text on a tinted run, hidden from assistive technology, and name read in its place
Highlighttext, current?Message's highlight (mark) inside an underline. Others are dashed; the current match is solid and aria-current
Redactiontype, label?A status fill with no visible text. The label is its visually hidden accessible text, read once, and sets the fill's width
A redaction is a fill with no visible text. Its label is the field name or "Redacted": set label on the segment, and redactionLabel on the body for the ones that have none. The label is accessible text only (visually hidden, read once), so sighted readers see the fill and screen reader users hear the label. The fill's width comes from the label, through a hidden copy of it, and never from the removed words, so it does not show how many characters were removed. Give the label a width you are happy to show: a short label makes a short fill.
The redaction is an inline run with the body's own font and line height and only inline padding, so one line is as tall as the text around it. A long label wraps between words like the rest of the body, and each line keeps the fill, padding and rounded corners. Under forced colors the fill becomes a Canvas fill with a CanvasText outline (dashed when automated), so its extent stays visible.
The original text is not in the value, so it is not in the page, the copy buffer, find-in-page or the accessibility tree. Message's own MessageRedaction is a different contract: it keeps the words, struck through, for the people who review them.
Props
segments is the body. redactionLabel is the default label for a redaction. as is span (default, so it sits inside a Message) or p. type defaults to the Message body role and foreground to Inherit, so a bubble keeps its own foreground. Native span attributes pass through except style, children and event handlers. Pass dir="auto" when the root is user text outside a Message; Message's content block already sets it.
Marking a highlight without color
A highlight is washed (Message's warning or accent fill) and underlined. The underline is the text treatment that survives forced colors, a monochrome screen and color blindness, and it separates the current match (solid) from the others (dashed).
Mentions
name is what a screen reader says in place of the visible text, such as "Mentioned: Medic 7". The visible text is aria-hidden, so a mention is read once. Find-in-page still finds the visible text.
Previous
Token / Accessibility
Next
Tokenized Text / API and Development
On this page
When to use
When not to use
Segments
Props
Marking a highlight without color
Mentions