Status Component
Static status indicator with a colored dot (or hollow ring) and optional text label. Uses ::before pseudo-element for the dot.
Notes
- Base:
.status. Default dot is a filled circle (info color).
- Variant:
.status-ring — hollow ring instead of filled dot. Compound variant: status-ring-primary (equals status-ring status-primary).
- Shapes:
status-square, status-rounded, status-circle / status-pill, status-fluid.
- Color + size:
status-* dynamic utilities (e.g. status-primary, status-4, status-[12px]).
Basic usage
Default
Online
Offline
Busy
Variants
Filled (default)
Primary
Success
Error
Caution
Hollow ring (status-ring)
Primary
Success
Error
Caution
Compound variant (status-ring-*)
Primary
Success
Error
Caution
Shapes
Default (circle)
Circle default
status-square
Square
status-rounded
Rounded
status-circle / status-pill (status-circle === status-pill)
Full circle
status-fluid
Fluid 3
Fluid 5
Fluid 8
Sizes
status-3 / status-4 (default) / status-5 / status-6 / status-8
status-3
status-4
status-5
status-6
status-8
Arbitrary size (status-[*])
[8px]
[12px]
[16px]
[20px]
[24px]
Theme colors
Primary / Secondary / Tertiary
Primary
Secondary
Tertiary
Success / Error / Info
Success
Error
Info
Highlight / Warning / Caution
Highlight
Warning
Caution
Ink / Title / Description / Caption / Disabled
Ink
Title
Description
Caption
Placeholder
status-black / status-white (on dark bg)
Black
White
Hollow ring colors (status-ring-*)
Primary
Secondary
Success
Error
Info
Caution
Warning
Ink
Title
Description
Caption
Placeholder
Black
Custom colors
Multiple color formats are supported:
- 1. Theme semantic colors, e.g.
*-error, *-error-hover
- 2. Tailwind built-in colors, e.g.
*-indigo-500
- 3. Raw color values, e.g.
*-[#ff0000]
- 4. CSS named colors, e.g.
*-[red], *-[green]
blue-500
green-500
[#ff6b6b]
[red]
Size + shape + color combinations
Square large success
Rounded small caution
Outline large primary
Use cases
System monitor
Web server — Running
Database — Running
Cache — High load
Queue — Connection failed
Logger — Maintenance
Backup — Disabled
Order status
Submitted
Confirmed
Completed
Cancelled