Marker
Displays an inline status, system note, bordered row, or labeled separator in a conversation.
A default marker
Opened implementation notes
Reading 4 files
The Marker component displays conversation markers such as status updates, system notes, bordered rows, and labeled separators. Compose it with Message in a conversation thread.
Installation
Usage
<Marker>
<Marker.Icon>
<Icons.Info />
</Marker.Icon>
<Marker.Content>
{"New messages below"->React.string}
</Marker.Content>
</Marker>Composition
Marker
├── Marker.Icon
└── Marker.ContentFeatures
- Inline marker, bordered row, and labeled separator variants
- Decorative icon slot hidden from assistive technology
- Status rows with
role="status" - Shimmer utility support for streaming text
- Custom styling through
classNameon every part
Examples
Variants
Use variant to switch between an inline marker, bordered row, and labeled separator.
Default marker
Switched to release-candidate
Today
Status
Set role="status" and include a Spinner for streaming or in-progress markers.
Compacting conversation
Thinking...
Loading earlier messages
Accessibility
Marker is presentational by default. For progress updates such as “Thinking...” or “Loading earlier messages,” set role="status". Marker.Icon is decorative and hidden with aria-hidden, so Marker.Content should carry the meaning.