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

Tokenized Text

API and Development

View SourceOpens in a new tabSubmit IssueOpens in a new tab
Import TokenizedText, TokenizedTextSegmentKind from @prepared911/ui/tokenized-text.
Renders a span (default) or p through Text. Takes native span attributes except style, children, event handlers, and the reserved state attributes.
PropTypeDefaultNotes
segmentsreadonly TokenizedTextSegment[]requiredThe body, in order
redactionLabelLocalizedMessageLabel for a redaction with none of its own
as"span" | "p""span"Host tag
typeTextTypeSubtitleTypography role
foregroundForegroundInheritForeground color
classNamestringAppended after the generated classes
refRef<HTMLElement>Root element
Segments
KindFields
TokenizedTextSegmentKind.Texttext: string
TokenizedTextSegmentKind.Linktext: string, href: string
TokenizedTextSegmentKind.Mentiontext: string, name: LocalizedMessage | DisplayValue
TokenizedTextSegmentKind.Highlighttext: string, current?: boolean
TokenizedTextSegmentKind.Redactiontype: MessageRedactionType, label?: LocalizedMessage
Accessibility copy (aria-label, aria-description, title) is LocalizedMessage.
Exports
TokenizedText, TokenizedTextSegmentKind, and the types TokenizedTextProps, TokenizedTextSegment, one segment type per kind, and TokenizedTextElement.
Props
NameTypeDefaultDescription
segmentsreadonly TokenizedTextSegment[]—The body, in order. A structured value, never markup: nothing in it is parsed as HTML.
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"span" | "p"—Host tag. Defaults to span, so it sits inside a Message.
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——
foregroundForeground—Foreground color. Defaults to {@link Foreground.Inherit}, so a bubble keeps its own foreground.
redactionLabelLocalizedMessage—Label for a redaction segment that has none of its own. A redaction with neither is an unnamed fill with no width, so pass one whenever a body can hold a redaction.
refRef<HTMLElement>—Ref to the root element.
titleLocalizedMessage | DisplayValue—Native tooltip; accessibility hint, not visible UI title text.
typeTextType—Typography role. Defaults to {@link TextType.Subtitle}, the Message body.
Storybook
Interactive examples and edge cases for this component are in Storybook.
DefaultOpens in a new tab
Previous
Tokenized Text / Usage
Next
Tokenized Text / Accessibility
On this page
Segments
Exports
Props
Storybook