Status Indicator
Operational status badge with colored dot and label for dashboards, status pages, and header bars.
class-variance-authority
Loading...
Installation
$ shadcn add @jalco/status-indicatorUsage
import { StatusIndicator } from "@/components/status-indicator"<StatusIndicator status="operational" />Examples
All Statuses
Core states
OperationalDegradedMajor OutageMaintenance
Sizes
Small
Operational
Medium
Operational
Large
Operational
Custom Labels
Custom text
All systems go
Dot only
Operational
API Reference
StatusIndicator
PropType
Notes
- Server component. No client-side JavaScript required for rendering.
- Auto-labeling. Status values are automatically title-cased for display (e.g. "major-outage" becomes "Major Outage").
- Accessibility. Uses
role="status"to ensure screen readers announce status changes appropriately.