# Marker

> Inline conversation markers, notes, and separators.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/marker.json`

## Install

```tsx
import { Marker, MarkerIcon, MarkerContent } from "@aspyn-io/kit";
```

### Markers

Slim inline rows for a conversation: labeled separators, live status, completed steps, and clickable actions.

```tsx
<Marker variant="separator"><MarkerContent>Today</MarkerContent></Marker>

<Marker role="status">
  <MarkerIcon><Spinner /></MarkerIcon>
  <MarkerContent>Compacting conversation…</MarkerContent>
</Marker>

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

<Marker asChild>
  <a href="#pr">
    <MarkerIcon><GitBranchIcon /></MarkerIcon>
    <MarkerContent>View the pull request</MarkerContent>
  </a>
</Marker>
```

## Notes

- Three variants: default (a plain row), border (a bottom rule), and separator (a centered label between two rules).
- Markers have no implicit role. Pass role="status" for live/streaming updates so screen readers announce them; MarkerIcon is always aria-hidden, so keep meaning in MarkerContent.
- For clickable markers, use asChild to render a real <a> or <button> and inherit native focus and keyboard behavior.
- Pairs with Message and Bubble to build a full conversation surface — see the Chat category.