StateBadge

A workflow-state badge: the category glyph, coloured, followed by the state's name. crisp builds in no states. Your app owns the list and passes each state's name, category and optional color (a tag swatch, 1 to 12, the same palette as Select option swatches).

The six categories each have a glyph: a dashed ring (backlog), an empty ring (unstarted), a ring with a centre dot (triage), a ring with a progress pie (started, with progress from 0 to 1, half by default), a check disc (completed) and a cross disc (canceled).

variant="plain" (the default) is bare icon and text for table cells. variant="chip" puts it in a 22px pill. iconOnly draws just the glyph and turns name into its accessible label. Pair it with StatePicker to change a state.

Installation

npm install @crisp-ui-kit/crisp

Usage

import { StateBadge, StateIcon } from "@crisp-ui-kit/crisp";

<StateBadge name="In progress" category="started" color={5} progress={0.5} />
<StateBadge name="Done" category="completed" variant="chip" />
<StateBadge name="Canceled" category="canceled" iconOnly />

// Just the glyph, sized and coloured by you
<StateIcon category="started" progress={0.25} size={16} style={{ color: "teal" }} />

StateIcon is the glyph on its own. It is decorative (aria-hidden), takes size (default 14), progress and markColor (the colour of the check or cross on the solid discs), and colours itself with currentColor.

Props

StateBadge also accepts every <span> attribute except color.

StateIcon

WorkflowState

The shape StatePicker takes, and the one to store your own states in: { id, name, category, color?, progress? }, with category a StateCategory ("triage" | "backlog" | "unstarted" | "started" | "completed" | "canceled").