Status
A small coloured dot for a live state.
Usage
import { Status } from "@kanzo-tech/ui";<Status variant="success" />Status is aria-hidden — a bare colour is not an accessible state. Always pair it with the
text it decorates, as in the example above.
Variants
Five variants and no color prop, which is the one design decision on this page worth
defending. The vocabulary is closed because a closed set can be measured. A dot may hold a
glyph, so a variant is not a colour — it is a (fill, ink) pair, and the pair is the thing that
either carries contrast or does not. Open it to an arbitrary color and there is nothing left
to assert: the ink no longer has a fill it was measured against.
So the five are measured. status.test.ts reads the recipe back rather than trusting it —
whatever statusVariants emits is parsed into a fill and an ink, resolved in every shipped theme,
and asserted at AA. Every variant clears 4.5:1 in every theme; the tightest margin is destructive
at 4.57 in the light hand-written themes (measured 2026-09-30).
Shark's recipe carries dark:bg-destructive-foreground, which reads as unremarkable in review — it
moves the fill and leaves the ink. Here a glyph on that fill under --destructive-content
measured 2.35:1 in dark: the text-white defect the --*-content tokens exist to kill, coming
back through a dark: override. So this recipe has no such override, and the test asserts the
shape: no variant may repaint its colour in one mode only. The class of defect is what is
guarded, not the single token that caused it.
Sizes
A glyph inside the dot
A Status accepts children, and an icon is auto-sized by the variant recipe. This is the case
the ink is measured for — at sm there is no room for one, so a glyph is really an lg
affordance.
The glyph is decoration like the dot around it: the whole element is aria-hidden, so a check
mark inside a green circle still needs the word beside it.
Status or Swatch
Both draw a small coloured shape, and the boundary is not the shape — it is where the colour came from.
Status depicts a meaning, and its colour follows. You pick warning; the token decides
what that looks like, and this package is on the hook for the result.
Swatch depicts a colour that arrived as data — a tenant's
theme resolved at runtime, a chart series, a theme the user chose. Nothing in this
package can measure that value, because it does not exist until a document is loaded; a
swatch's obligations are checked upstream, at that document's gates.
That is why these are two components rather than one with a color escape hatch. They carry
different obligations, not different props — and a color prop on Status would quietly move a
contrast guarantee from a test in this repo to a call site that has no way to honour it.
As an overlay
The recipe includes ring-2 ring-background, so the dot cuts a halo out of whatever it sits
on instead of blending into it.
API Reference
| Prop | Type | Default |
|---|---|---|
variant | "default" | "success" | "info" | "warning" | "destructive" | "default" |
size | "sm" | "md" | "lg" | "md" |
Extends React.ComponentProps<typeof ark.span>. statusVariants is exported if you need the
same treatment on another element.