Status Pill

A colored-dot-plus-label chip that communicates status at a glance using a soft tinted background and a matching StatusDot.

Default

OperationalDegradedOutageScheduledUnknownLive

Custom Class

Larger text via className

ActiveInactiveProcessing

Full-width pill (block stretch)

All systems operationalPartial outage detectedMajor incident ongoing

Inside a card header

Background WorkerRunning

Last heartbeat 2 seconds ago — processing batch 47 of 120.

Inline Text

Inline with prose

The background job is currently running and will complete in approximately 3 minutes.

Your last deployment ended with a failure — check the build logs for details.

The scheduled maintenance window is pending and will begin tonight at 02:00 UTC.

API response times are degraded — P99 latency has exceeded the 500 ms threshold.

Pulse

Pulse — live / active states

StreamingIncident activeSyncingThrottled

No pulse — static states

CompletedFailedQueuedStale

Table Rows

Service	Region	Status	Uptime
API Gateway	us-east-1	Operational	99.98%
Auth Service	us-east-1	Operational	100%
Storage Bucket	eu-west-2	Degraded	97.41%
Job Queue	ap-southeast-1	Syncing	99.10%
Email Worker	us-west-2	Outage	88.32%
Cache Layer	eu-central-1	Unknown	—

Tones

All tones

HealthySystem is operating normally

DegradedPerformance is below expected thresholds

CriticalService is unavailable or failing

PendingAwaiting confirmation or processing

InactiveNo recent activity detected

Installation

npx shadcn@latest add @byronwade/status-pill

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.