data-display / stable

StatusIcon

Workflow status glyph with per-status hue and position fill; StatusLabel adds its name.

LIVE PREVIEW

Loading preview…

When to use

Work-item status in rows, kanban cards, pickers and peek headers.
Any workflow status — map the status to its category, pass its hue as `color` and its fill fraction as `progress`.

Consider an alternative

Non-status labels (tags, counts, Draft/Beta) — use Badge.
On its own without a name or `label` — colour and shape alone are not enough.

Import

import { StatusIcon } from '@revido-llc/kit';

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


category (required)	"backlog" \| "blocked" \| "cancelled" \| "done" \| "in-progress" \| "in-review" \| "todo"	—
color	string	—	Any CSS colour or `var(--token)`. Defaults to the category's token colour.
label	string	—	Accessible name. Omit when visible text names the status (decorative).
progress	number	—	Filled fraction (0–1) within an active category, in workflow position order. May also be inherited from --status-progress on a containing board lane.
size	number	14	Pixel size (square). Default 14.
children	ReactNode	—
className	string	—

Related exports

StatusLabel

Examples

Workflow positions

Fifteen workflow statuses, with hue and fill advancing within active categories. Foreground-mixed ink remains legible on each popover surface.

<StatusLabel category="in-progress" color="var(--warning)" progress={0.25}>In Progress</StatusLabel>
<StatusLabel category="in-progress" color="var(--info)" progress={0.5}>PR Open</StatusLabel>
<StatusLabel category="in-review" color="var(--primary-text)" progress={0.75}>Final Review</StatusLabel>

Custom status hue

Workflow statuses keep their own colour; pass it as a CSS colour or token var.

<StatusLabel category="in-review" color={status.color}>{status.name}</StatusLabel>

Icon only

In tight spots (a kanban card corner), give the icon a `label` so it is announced.

<StatusIcon category="blocked" label="Blocked" />

Related components

Badge ↗