Marker
Displays an inline status, system note, bordered row, or labeled separator in a conversation.
Marker displays inline conversation markers such as status updates, system notes, bordered rows, and labeled separators. Compose it with Message in a conversation thread.
Variants
Use variant to switch between an inline marker, bordered row, and labeled separator.
- default: an inline marker for status, notes, and actions.
- border: a default marker with a bottom border under the row.
- separator: a centered label with divider lines on each side.
Status
Set role="status" and include a Spinner for streaming or in-progress markers so updates are announced.
Shimmer
Add the shimmer utility class to MarkerContent for an animated streaming-text effect. The utility ships with the stylesheet; see the Shimmer page for the modifiers.
Separator
Use the separator variant for labeled dividers, such as dates or section breaks, in a conversation.
Border
Use the border variant for status rows that should keep the default marker alignment while separating the next row.
With Icon
Use MarkerIcon to render an icon alongside the content. Use flex-col to stack the icon above the content.
Anatomy
Import all parts and piece them together.
<script setup>
import {
Marker,
MarkerContent,
MarkerIcon,
} from "@/components/ui/marker";
</script>
<template>
<Marker>
<MarkerIcon />
<MarkerContent />
</Marker>
</template>API Reference
Marker
MarkerIcon
MarkerContent
Accessibility
Keyboard shortcuts and ARIA behavior.
- Marker is presentational by default. The correct semantics depend on how you use it, so choose the role based on intent rather than relying on a single default.
- For streaming or progress markers such as "Thinking..." or a running tool, set role="status" so assistive tech announces the update as it appears. Marker forwards role to the underlying element.
- A separator that carries text, such as a date or a section label, needs no role. The divider lines are decorative CSS pseudo-elements, and the text is announced as ordinary content.
- Do not add role="separator" to a labeled divider. A separator takes its accessible name from aria-label, not from its text, and its contents are treated as presentational, so the visible label would not be announced. Reserve role="separator" for a divider with no meaningful text.
- A bordered marker keeps the same semantics as the default marker. The bottom border is decorative, so choose role="status", as-child, or no role based on the marker's purpose.
- MarkerIcon is decorative and hidden from assistive tech with aria-hidden, so the adjacent MarkerContent carries the meaning. For an icon-only marker, give the root an aria-label or visible text so it is not announced as empty.
- When a marker links or triggers an action, render it as a real button or anchor with as-child so it is focusable and exposes the correct role. The accessible name comes from the marker text.