Marker

UsageCopy Anchor Link

import {
  Marker,
  MarkerContent,
  MarkerIcon,
} from '@vitnode/core/components/ui/marker'

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

A marker is the quiet line between messages: "Switched branch", "Today", "Thinking...". It pairs well with Bubble in a chat thread.

VariantsCopy Anchor Link

default is an inline note. separator centers a label between two lines. border adds a line under the row.

<Marker variant="separator">
  <MarkerContent>Yesterday</MarkerContent>
</Marker>

Keep separator labels short. The lines only get the space the label leaves.

TonesCopy Anchor Link

Set tone when the note carries good or bad news. Colors match Alert and Badge, mixed toward the foreground to stay readable in both themes.

<Marker tone="success">
  <MarkerIcon>
    <CircleCheck />
  </MarkerIcon>
  <MarkerContent>Build passed</MarkerContent>
</Marker>

Color is a bonus, not the message. Pair it with an icon or words.

Stacked iconCopy Anchor Link

MarkerIcon sizes any icon to the text. Add flex-col to put it above the text.

<Marker className="flex-col">...</Marker>

Status and shimmerCopy Anchor Link

For work in progress, set role="status", put a Spinner in the icon slot and add the shimmer utility to the text. See the last line of the preview.

<Marker role="status">
  <MarkerIcon>
    <Spinner />
  </MarkerIcon>
  <MarkerContent className="shimmer">Thinking...</MarkerContent>
</Marker>

Links and buttonsCopy Anchor Link

Pass render to turn the marker into a link or a button. Links get an underline for free.

<Marker render={<a href="/admin/plugins" />}>
  <MarkerContent>View installed plugins</MarkerContent>
</Marker>

<Marker
  render={<button className="hover:text-foreground" onClick={revert} type="button" />}
>
  <MarkerContent>Revert this change</MarkerContent>
</Marker>

AccessibilityCopy Anchor Link

• A marker is a plain div. Add role="status" for live progress, render an a or button when it's clickable, and nothing for a plain note.
• Don't add role="separator" to a labeled separator. It would hide the label from assistive tech. The lines are decorative pseudo-elements.
• MarkerIcon is aria-hidden. Give an icon-only marker an aria-label.
• Wrap a thread in role="log" so new messages and markers are announced in order.

PropsCopy Anchor Link

MarkerCopy Anchor Link

MarkerIcon and MarkerContentCopy Anchor Link

Both render a span and take every span prop.

API ReferenceCopy Anchor Link

Base UI - useRender