Marker

Overview

A marker is the quietest line in a thread: the date separator, the "Ada joined" system note, the status of a step that is still running. It takes the kit's type-caption scale (12/18/300) in the on-surface-variant tone, so it reads without ever competing with the messages around it. Three forms — bare, centered between outline-variant hairlines, or underlined by one.

Examples

Variants

default is the inline meta line — an icon and a note. border closes a row with an outline-variant hairline, for markers that summarize the block above them. separator centers the text between two hairlines, which is the form a date divider takes.

Status

While a step is running, pair the marker with a <Spinner> and set role="status" so screen readers announce the update as it changes. The text-shimmer utility sweeps a brighter on-surface band across the caption to say the work is still in flight; it flattens back to the plain variant tone under prefers-reduced-motion.

Interactive

Pass a link or a button to render and the whole line becomes the hit target: it warms to on-surface on hover and takes the kit's secondary focus ring. Render a real <a> or <button> — never a <div> with a click handler.

In a conversation

Markers are siblings of the messages, not children of them: drop them straight into a <MessageGroup> between two <Message> blocks and the stream keeps its rhythm.

Installation

npx shadcn@latest add marker

Anatomy

<Marker>
  <MarkerIcon>
    <CheckIcon />
  </MarkerIcon>
  <MarkerContent>Explored 4 files</MarkerContent>
</Marker>

API Reference

Accessibility

• The icon slot is aria-hidden — the text carries the meaning, so never leave a marker with an icon alone.
• Markers that change while the thread is live (a running step, "new messages") take role="status", which announces the new text politely instead of interrupting.
• Do not put role="separator" on a labeled divider: it suppresses the announcement of the text. The separator variant draws its lines as CSS pseudo-elements, which are invisible to assistive tech by design.
• Pressable markers must render a real <a> or <button> through render, so they stay focusable and keyboard-activatable.