Preview
Design guidance
The separator variant composes the canonical Separator owner. The status variant uses role="status"; it does not infer loading or add a timer. Empty content renders no marker.
Installation
Install the neutral source from the local registry endpoint.
Import the installed foundation.css once after shared tokens when using foundational controls.
Basic usage
Structures
Examples
Date separator
Separate transcript events with a quiet date boundary.
Handoff note
Show a short event without a message bubble.
Working status
The status text changes through a real caller action and remains the only announced content.
Completion note
Confirm an event with caller-owned text.
Conversation semantics
Use kind to preserve the meaning of a time, boundary, unread marker, or join event. The marker does not infer these meanings from its text.
Long participant name
Long event text wraps inside the available conversation width.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'note' | 'separator' | 'status' | 'note' | Selects the marker presentation. If omitted, the presentation follows kind. |
kind | 'time' | 'date' | 'last-conversation' | 'last-read' | 'unread' | 'person-joined' | 'agent-joined' | Preserves the caller-owned conversation boundary or event meaning. | |
label | string | Provides an optional accessible name. | |
children | ReactNode | Caller-owned concise marker text. |