Marker

Status updates, system notes, bordered rows, and labeled separators for a conversation - streaming state, tool activity, date breaks, and the like.

Default

A centered, muted note for inline status or system messages.

New messages

Conversation started 2:14 PM

The three visual treatments: default, separator, and border.

Default — centered, muted note

Separator

Border — a discrete system row

The separator variant draws a rule on either side of the label - ideal for date breaks.

Today

Yesterday

A bordered row for tool calls and discrete system events.

Tool call: search_docs("scroll behavior")

System: model switched to fast mode

Pair MarkerIcon with MarkerContent. Add the shimmer utility to the label for live status.

Generating response…

Task completed

A MarkerIcon sits before the label and works across every variant.

Assistant joined the conversation

March 12

Searched the web

Use icon color to signal state: success, in-progress, and error.

Deployment succeeded

Running checks…

Connection lost

Add the shimmer utility to MarkerContent for a live, loading label.

Thinking…

Generating response…

Render the marker as an interactive element with as="button" or asChild on an <a>.

Prop	Type	Default	Description
`variant`	`"default" \| "separator" \| "border"`	`"default"`	Visual treatment of the marker row.
`asChild`	`boolean`	`false`	Merge props onto the child element via reka-ui Primitive.
`as`	`string \| Component`	`"div"`	Element or component to render as.
`class`	`string`	—	Extra classes, merged with cn().

Slot	Description
`default`	Marker contents (MarkerIcon, MarkerContent).

Slot	Description
`default`	Icon, hidden from assistive tech.

Slot	Description
`default`	Label text.