Status Icon

InstallCopy Anchor Link

pnpm exec vegastack-design verify status-icon

pnpm dlx shadcn@4.21.0 add @vegastack/status-icon

UsageCopy Anchor Link

import { StatusIcon } from "@/components/ui/status-icon";

<StatusIcon status="progress" />;

ExamplesCopy Anchor Link

StatesCopy Anchor Link

Each status draws its own Linear-style glyph on a 16-unit grid in one of the system's standard semantic color tokens: backlog (dashed ring, muted-foreground), todo (empty ring, foreground), progress (ring with a half pie, warning-text), review (ring with a three-quarter pie, info-text), done (filled disc with a check, success-text), canceled (filled disc with a cross, muted-foreground), duplicate (ring with two diagonal strokes, muted-foreground) and triage (filled disc with a left-right arrow, tag-orange-text). blocked and cancelled remain as deprecated aliases: cancelled renders canceled, and blocked draws a slashed ring in warning-text.

Still and animated progressCopy Anchor Link

progress is static by default — lists and boards should not spin dozens of rows at once. Pass animated to spin the glyph for a single live item.

SizesCopy Anchor Link

xs (14px), sm (16px), md (20px), lg (24px) — plain Tailwind size-* steps. Pick the one that matches the text it sits beside.

Each status renders at every size:

With a text labelCopy Anchor Link

When adjacent text already states the status, pass label="" so the icon is marked decorative (aria-hidden) and the screen reader announces the text once rather than twice. This is the recommended accessible pattern.

<span className="flex items-center gap-2">
  <StatusIcon status="progress" label="" />
  In progress
</span>

Status menu recipeCopy Anchor Link

There is no picker component: compose DropdownMenu + StatusIcon + DropdownMenuShortcut. The trigger is a ghost icon button showing the current status. While the menu is open, 1–7 pick Backlog / Todo / In progress / In review / Done / Canceled / Duplicate, and 0 picks Triage. ⌥/Alt-click the circle marks the item Done without opening the menu — pair it with an Undo toast.

<DropdownMenu open={open} onOpenChange={setOpen}>
  <DropdownMenuTrigger
    render={
      <Button
        variant="ghost"
        size="icon-sm"
        aria-label={`Status: ${label}. Alt-click to mark done`}
        onClick={(e) => {
          if (!e.altKey) return;
          e.preventBaseUIHandler();
          setStatus("done");
        }}
      />
    }
  >
    <StatusIcon status={status} size="sm" label="" />
  </DropdownMenuTrigger>
  <DropdownMenuContent onKeyDown={pickByShortcut}>
    {STATUSES.map((s) => (
      <DropdownMenuItem key={s.value} onClick={() => setStatus(s.value)}>
        <StatusIcon status={s.value} size="sm" label="" />
        {s.label}
        <DropdownMenuShortcut>{s.key}</DropdownMenuShortcut>
      </DropdownMenuItem>
    ))}
  </DropdownMenuContent>
</DropdownMenu>

In Select and Combobox optionsCopy Anchor Link

Use the icon as the leading icon of each option (with label="", since the option text names the status), so filters and pickers read the same as rows.

For priority, see Priority Icon.

PlaygroundCopy Anchor Link

Pick a status and size to preview each state's icon and color, then copy the generated JSX.

<StatusIcon />

API ReferenceCopy Anchor Link

AccessibilityCopy Anchor Link

• By default the icon renders role="img" with an aria-label derived from status (e.g. "In progress"), so assistive tech announces the state. Override the wording with the label prop.
• When adjacent text already states the status — for example a label next to the icon — pass label="" to make the icon decorative (aria-hidden) and avoid a redundant announcement.
• Color is conveyed through a semantic token (currentColor) only — never rely on color alone to communicate the status; the distinct icon shapes carry the meaning too.
• progress is static unless animated; the spin stops under prefers-reduced-motion: reduce through the global reset in base.css, which every component inherits rather than restating.

Do / Don'tCopy Anchor Link