Status Pill

Installation

pnpm dlx shadcn@latest add @ffg/status-pill

Usage

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

<StatusPill variant="resolved" label="Allocated" />

A rounded pill that communicates the state of a transfer or task. Six variants:

• idle / active — outlined (strong divider border, foreground text)
• resolved — solid; maps to --primary so it inverts in dark mode
• failed — destructive fill at 20%
• cancelled / reversed — muted neutral fill

The PHASE_TO_VARIANT map is exported for translating transfer phases (preview, in-progress, allocated) to the matching variant.

Dark mode: high-contrast variants (resolved, failed) are pixel-exact in light mode and invert correctly in dark; neutral variants use the muted token pair so they remain legible against either background.