Skip to content
AI chat

Marker

A small inline line: what's happening, a note, or a labeled divider.

import { Marker } from "@flinbu/seed";

Variants

Today
Opened tokens.json
Checking 435 tokens for contrast
Couldn't reach Figma. Your tokens are saved.
Proposal #12 opened
import { Marker } from "@flinbu/seed";
import { FileSearch } from "lucide-react";

<div className="flex w-full max-w-xl flex-col gap-base">
  <Marker variant="separator">Today</Marker>
  <Marker icon={<FileSearch />}>Opened tokens.json</Marker>
  <Marker status="running">Checking 435 tokens for contrast</Marker>
  <Marker status="error">Couldn't reach Figma. Your tokens are saved.</Marker>
  <Marker variant="border" href="#">Proposal #12 opened</Marker>
</div>

Use it for

  • 'Checked 435 tokens', 'Today'.

Use something else for

  • Several steps of work: use Trace.

Props

PropTypeDefaultDescription
variant'note''border''separator''note'Look.
iconicon–Leading icon.
status'running''error'–State.
hrefstring–Link to what it mentions.

Accessibility

  • Running markers are a polite status.
  • A labeled separator keeps its text readable.