Status Indicator
Data Display
Status
Colored dots for showing presence, availability, or system status. Perfect for user presence, service health, and real-time status displays.
Preview
Interactive status indicator examples
OnlineBusyAwayOffline
Status Types
All available status options
OnlineOfflineBusy
AwayDo Not DisturbInvisible
Sizes
Available indicator sizes
xs
sm
md
lg
xl
Pulse Animation
Animated indicators for live/active status
LiveRecordingConnecting...
With Ring
Ring for better visibility on avatars
JD
JS
BW
Custom Color
Custom status colors
PurplePinkCyanOrange
Label Position
Label on left or right side
OnlineOnline
Use Cases
Common status indicator patterns
User Presence
A
AliceB
BobC
CarolService Health
API ServerOnline
DatabaseOnline
CDNDegraded
Props
StatusIndicator component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
status | 'online' | 'offline' | 'busy' | 'away' | 'dnd' | 'invisible' | 'custom' | 'offline' | Status type determining the color |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size of the indicator dot |
pulse | boolean | false | Add pulse animation for active/live status |
ring | boolean | false | Add white ring for visibility on colored backgrounds |
color | string | — | Custom color (only works with status="custom") |
label | string | Based on status | Label for accessibility and optional display |
showLabel | boolean | false | Show the label text next to the indicator |
labelPosition | 'left' | 'right' | 'right' | Position of label relative to dot |
className | string | — | Additional CSS classes |
Usage
Import and implementation example
import { StatusIndicator } from '@/components/ui/status-indicator'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
export default function Example() {
return (
<div className="relative">
<Avatar size="lg">
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<span className="absolute bottom-0 right-0">
<StatusIndicator status="online" size="md" ring />
</span>
</div>
)
}Features
Built-in functionality
- 6 status types: Online, offline, busy, away, do-not-disturb, and invisible
- 5 sizes: From xs (6px) to xl (16px)
- Pulse animation: Optional pulse for live/active indicators
- Ring option: White ring for visibility on avatars/images
- Custom colors: Use any color with status="custom"
- Label support: Optional text label with position control
- Dark mode: Full dark mode support
Accessibility
ARIA support
ARIA Attributes
role="status"aria-label (automatic based on status)aria-hidden="true" on decorative dotNotes
- Uses role="status" for screen reader announcement
- Automatic aria-label based on status type
- Color is not the only indicator - labels provide context
- Sufficient color contrast in both light and dark modes