Foundations
Status Pill
Tinted status pills in five tones with icon or dot, plus a mono Tag for models, branches and transports.
2 variantsMIT
Preview
QueuedRunningDoneFailedNeeds review
WaitingHealthyHigh risk
Installation
Copies the component into components/ui and installs its dependencies and theme tokens.
pnpm dlx shadcn@latest add https://tuffui.com/r/status-pill.jsonUsage
Pass your own data and wire the callbacks to your agent runtime.
import { CheckCircle } from "@phosphor-icons/react";
import { StatusPill, Tag } from "@/components/ui/status-pill";
<StatusPill tone="positive" icon={CheckCircle}>Done</StatusPill>
<StatusPill tone="brand">Running</StatusPill>
<Tag>opus-5.5</Tag>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "neutral" | "brand" | "positive" | "negative" | "warning" | "neutral" | Tinted background and text color. Always pair with text. |
| size | "sm" | "md" | "md" | 20px or 24px tall. |
| icon | Icon | — | Leading Phosphor icon. |
| iconWeight | "fill" | "bold" | "fill" | Bold for line glyphs. |