Status Pill

CSS

A square marker and a mono label, in one of four tones.

passdriftfailqueued

Install

$ npx shadcn@latest add https://spotcheckui.com/r/status-pill.json

No motion engine needed.

Usage

import { StatusPill } from "@/components/spotcheck/status-pill"

<StatusPill tone="ok">pass</StatusPill>
<StatusPill tone="warn">drift</StatusPill>
<StatusPill tone="bad">fail</StatusPill>

Always include a word, because colour alone doesn't reach everyone.

Props

tone"ok" | "warn" | "bad" | "neutral"Default neutral

Keyboard

Nothing to operate: this component displays information.

Reduced motion

Nothing here animates.