KQ-1499 · VERDICT/MARK

Verdict Mark

A status mark drawn with one two-part stroke: while pending, an arc spins on the ring with its length breathing, and when the state changes that arc, still turning, flows point by point into a check, an exclamation or a cross, head first with its tail following, so the stroke draws itself into the outcome. The check draws on springs.flick, the exclamation's dot drops in on springs.recoil, the cross arrives on springs.snap and shakes once, and the colour moves with it in oklab while the ring turns from a hairline track into a tinted disc. It is a polite status that says each new state once; it takes no keys because it is not a control.

KQ-1499 · VERDICT/MARK

Waylight · api · production

Build 482

build 482 · deploying

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/verdict-mark

Props

state: "pending" | "success" | "warning" | "error"; default "pending"; What the mark says: spinning while pending, then the outcome. Any change flows from what is drawn, even mid-morph.
onSettle: (state: "success" | "warning" | "error") => void; default —; Fires once an outcome has finished settling: after the flick, the dot's drop or the shake.
size: "sm" | "md" | "lg" | "xl" | number; default "md"; 20, 32, 48 or 72px, or any number of px; the label's type size follows.
stroke: number; default 3.5; The stroke's weight in units of the mark's 48-unit box, 1 to 8.
labels: Partial<Record<state, string>>; default Working, Done, Needs attention, Failed; The word for each state: the spoken status, and the label when shown.
showLabel: boolean; default false; Show the label beside the mark; it rolls to each new word on springs.snap in a cell sized to the longest.
colors: Partial<Record<state, string>>; default accent, success, warn, danger; The colour for each state, mixed in oklab as it changes. Any CSS colours.
speed: number; default 1.1; How fast the pending arc turns, in turns per second; its momentum carries into the gather.
ring: boolean; default true; Draw the ring: a hairline track while pending, a tinted ring and disc once settled.
shake: number; default 3; How far an error shakes, in units of the 48-unit box; 0 for none.
minPending: number; default 400; The least time the spinner shows, in ms, so a quick result never flashes past it.
announce: boolean; default true; Speak each new state politely (role="status"). Off, the mark is role="img" named by its label.
sound: boolean; default false; A tick when it settles well, a lower tick on a warning, a buzz on a failure; never before the page has had a press or a key.
className: string; default —; Classes for the root, an inline-flex row.

Prop	Type	Default	Description
state	"pending" \| "success" \| "warning" \| "error"	"pending"	What the mark says: spinning while pending, then the outcome. Any change flows from what is drawn, even mid-morph.
onSettle	(state: "success" \| "warning" \| "error") => void	—	Fires once an outcome has finished settling: after the flick, the dot's drop or the shake.
size	"sm" \| "md" \| "lg" \| "xl" \| number	"md"	20, 32, 48 or 72px, or any number of px; the label's type size follows.
stroke	number	3.5	The stroke's weight in units of the mark's 48-unit box, 1 to 8.
labels	Partial<Record<state, string>>	Working, Done, Needs attention, Failed	The word for each state: the spoken status, and the label when shown.
showLabel	boolean	false	Show the label beside the mark; it rolls to each new word on springs.snap in a cell sized to the longest.
colors	Partial<Record<state, string>>	accent, success, warn, danger	The colour for each state, mixed in oklab as it changes. Any CSS colours.
speed	number	1.1	How fast the pending arc turns, in turns per second; its momentum carries into the gather.
ring	boolean	true	Draw the ring: a hairline track while pending, a tinted ring and disc once settled.
shake	number	3	How far an error shakes, in units of the 48-unit box; 0 for none.
minPending	number	400	The least time the spinner shows, in ms, so a quick result never flashes past it.
announce	boolean	true	Speak each new state politely (role="status"). Off, the mark is role="img" named by its label.
sound	boolean	false	A tick when it settles well, a lower tick on a warning, a buzz on a failure; never before the page has had a press or a key.
className	string	—	Classes for the root, an inline-flex row.