Primitives · Application UI
Status Pill
A colored-dot-plus-label chip that communicates status at a glance using a soft tinted background and a matching StatusDot.
Feature showcase
Installation
Features
6 examples
Default, Custom Class, Inline Text, Pulse, Table Rows, Tones.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "success" | "warning" | "danger" | "info" | "neutral" | "neutral" | Color tone that controls the dot color, text color, and background tint. |
| children | React.ReactNode | - | Label text or content rendered inside the pill. |
| pulse | boolean | false | When true, the status dot animates with a ping effect to indicate live activity. |
| className | string | - | Additional CSS classes to merge onto the pill element. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/status-pill.tsx |
| Default example | content/examples/status-pill/default.tsx |
| Custom Class example | content/examples/status-pill/custom-class.tsx |
| Inline Text example | content/examples/status-pill/inline-text.tsx |
| Pulse example | content/examples/status-pill/pulse.tsx |
| Table Rows example | content/examples/status-pill/table-rows.tsx |
| Tones example | content/examples/status-pill/tones.tsx |