Marker
An inline status, bordered row, or labeled divider.
Overview
Marker is presentational. Use role="status" when the text is a live update. Put a real link or button in MarkerContent when the marker should navigate or act. MarkerIcon is hidden from assistive technology.
Preview
Customize
Installation
Add the component with the CLI. It copies the files in and installs anything they depend on.
npx vinyaas add markerUsage
import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker";
export function Note() {
return (
<Marker>
<MarkerIcon><span /></MarkerIcon>
<MarkerContent>Explored 4 files</MarkerContent>
</Marker>
);
}Examples
Live status
Pair Marker with Spinner and role="status" for a running update assistive tech can announce.
With icon
MarkerIcon holds a decorative glyph. The message stays ordinary text beside it.
Bordered rows
Use border when stacking a short activity list. Each row keeps the inline marker look.
Day separator
A labeled divider splits ordinary copy into days without making every line a Marker.
Merged accessibility fixes for Dialog.
Published registry artifacts for Toast.
In practice
A project card carries one status Marker. The rest of the surface is Card, copy, and a button.
Production · us-east-1
Last deploy finished 12 minutes ago. Traffic is healthy.
API
Other attributes for the underlying element are passed through.
| Name | Type | Default | Description |
|---|---|---|---|
variant | "default" | "border" | "separator" | "default" | default is an inline note. border adds a bottom divider. separator centers the label between lines. |
className | string | — | Merged onto Marker, MarkerIcon, or MarkerContent with cn. |
Accessibility
- The root has no role unless you pass one.
- Status text uses role="status".
- MarkerIcon is aria-hidden. An icon-only marker needs an aria-label.
- A labeled separator does not use role="separator".
- Links and buttons stay real anchors and buttons.