Ansora status pill
Status pill. Tones: neutral (in order), warn, critical, info. There is no green among them — green is the brand colour, never a state. Not a replacement for the upstream shadcn `badge`: that one is a generic label with variants, this one only ever says what state something is in.
primitivestatus
Install
pnpm dlx shadcn@4.23.0 add @ansora/status-pillExamples
Usage
Never signal a state by colour alone — always add text or an icon (WCAG 1.4.1). The label is a required prop at the type level, so a pill that is nothing but a coloured rectangle cannot be written: <StatusPill tone="critical" /> does not compile, and neither does children={null} (the type is NonNullable<React.ReactNode>). tone on the other hand is optional and defaults to neutral, which means "in order" — a forgotten tone has to de-escalate a pill, never escalate it.
The installed file is components/ui/ansora/status-pill.tsx, so it sits next to upstream's components/ui/badge.tsx without touching it — install both if you need both.
Files
registry/ansora/ui/status-pill.tsx→@ui/ansora/status-pill.tsx
Dependencies
@ansora/base
Ansora sidebar
Side navigation with collapsing, a mobile drawer and a keyboard shortcut. A vendored and patched copy of the shadcn sidebar.
AI field
A labelled frame around one extracted field: the caller's control, an optional confidence band, a confirm decision and — when a human changed it — the visible original and a way back.