Marker
The marker is the small line between chat messages: a status update, a date divider, or an activity note. Use it between message rows for messaging UIs and AI assistants.
<div class="marker">
<span class="marker-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6a9 9 0 0 0-9 9V3"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/></svg>
</span>
<span class="marker-content">Switched to a new branch</span>
</div>
<div class="marker" role="status">
<span class="marker-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
</span>
<span class="marker-content shimmer">Thinking...</span>
</div>
<div class="marker marker-separator">
<span class="marker-content">Conversation compacted</span>
</div>
<div class="marker">
<span class="marker-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
</span>
<span class="marker-content">Explored 4 files</span>
</div>Usage
Add the marker class to a container with a marker-content element holding the text, and a marker-icon before it when the line needs one. The container can also be a button or a link.
<div class="marker">
<span class="marker-content">Marker</span>
</div>Examples
Variants
marker-separator centers the text between hairlines, and marker-border closes the line with a bottom border.
<div class="marker">
<span class="marker-content">A default marker for inline notes.</span>
</div>
<div class="marker marker-separator">
<span class="marker-content">A separator marker</span>
</div>
<div class="marker marker-border">
<span class="marker-content">A border marker for row boundaries.</span>
</div>Status
Add role="status" so screen readers announce the update, with a spinning icon for running work.
<div class="marker" role="status">
<span class="marker-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
</span>
<span class="marker-content">Compacting conversation</span>
</div>
<div class="marker marker-separator" role="status">
<span class="marker-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
</span>
<span class="marker-content">Running tests</span>
</div>Shimmer
Add shimmer to the content to sweep a highlight across the text while something is in progress.
Separator
Separator markers divide a conversation into sections.
Border
Border markers read as a compact activity log.
<div class="marker marker-border">
<span class="marker-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6a9 9 0 0 0-9 9V3"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/></svg>
</span>
<span class="marker-content">Switched to release-candidate</span>
</div>
<div class="marker marker-border">
<span class="marker-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
</span>
<span class="marker-content">Reviewed 8 related files</span>
</div>
<div class="marker marker-border">
<span class="marker-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>
</span>
<span class="marker-content">Opened implementation notes</span>
</div>Icon
marker-icon leads the line; stack the marker with flex-col to center the icon above the text.
<div class="marker">
<span class="marker-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6a9 9 0 0 0-9 9V3"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/></svg>
</span>
<span class="marker-content">Switched to a new branch</span>
</div>
<div class="marker marker-separator">
<span class="marker-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
</span>
<span class="marker-content">Explored 4 files</span>
</div>
<div class="marker flex-col">
<span class="marker-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21V7"/><path d="m16 12 2 2 4-4"/><path d="M22 6V4a1 1 0 0 0-1-1h-5a4 4 0 0 0-4 4 4 4 0 0 0-4-4H3a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h6a3 3 0 0 1 3 3 3 3 0 0 1 3-3h6a1 1 0 0 0 1-1v-1.3"/></svg>
</span>
<span class="marker-content">Syncing completed</span>
</div>Links and buttons
Put marker on a link or button to make the line navigable.
<a href="#links-and-buttons" class="marker">
<span class="marker-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6a9 9 0 0 0-9 9V3"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/></svg>
</span>
<span class="marker-content">View the pull request</span>
</a>
<button class="marker transition-colors hover:text-foreground">
<span class="marker-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
</span>
<span class="marker-content">Revert this change</span>
</button>RTL
Add dir="rtl" to any parent element, typically <html>, to render right-to-left. See the RTL guide for details.
<div id="marker-rtl-demo" dir="rtl" class="flex w-full flex-col gap-6">
<div class="marker marker-separator">
<span class="marker-content" data-i18n="today">اليوم</span>
</div>
<div class="marker" role="status">
<span class="marker-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
</span>
<span class="marker-content shimmer" data-i18n="thinking">جارٍ التفكير...</span>
</div>
</div>
<script>
const translations = {
ar: {
dir: "rtl",
today: "اليوم",
thinking: "جارٍ التفكير...",
},
he: {
dir: "rtl",
today: "היום",
thinking: "חושב...",
},
en: {
dir: "ltr",
today: "Today",
thinking: "Thinking...",
},
};
window.addEventListener("message", (e) => {
const t = translations[e.data?.lang];
if (e.data?.type !== "sp-language" || !t) return;
document.getElementById("marker-rtl-demo").dir = t.dir;
document.querySelectorAll("[data-i18n]").forEach((el) => {
el.textContent = t[el.dataset.i18n];
});
});
</script>