Marker

Inline status, system notes, bordered rows, and labeled separators — useful in chat and agent threads. Presentational by default; set role="status" for live updates.

Basic

Inline status notes with an optional decorative MarkerIcon.

Installation

CLI

npx @sonojs/ui@latest add marker

Composition

structure

Marker
├── MarkerIcon
└── MarkerContent

Usage

marker.tsx

import { CheckIcon } from "lucide-react"

import {
  Marker,
  MarkerContent,
  MarkerIcon,
} from "@/components/ui/marker"

export function Example() {
  return (
    <Marker>
      <MarkerIcon>
        <CheckIcon />
      </MarkerIcon>
      <MarkerContent>Explored 4 files</MarkerContent>
    </Marker>
  )
}

Props

Prop	Type	Default	Description
variant	"default" · "border" · "separator"	"default"	Layout: inline, bottom border, or labeled divider.
asChild	boolean	false	Merge onto a child `<a>` or `<button>` via Slot.
role	string	—	Use `"status"` for streaming / progress markers.
className	string	—	Merge extra Tailwind classes on any part.