Component
Presence Indicator
Colored status dots showing online, away, busy, or offline presence. Uses the headless @refraction-ui/presence-indicator core.
Examples
Four presence states with optional labels.
OnlineOnline
AwayAway
BusyBusy
OfflineOffline
Installation
$
pnpm add @refraction-ui/react-presence-indicatorUsage
tsx
import { PresenceIndicator } from '@refraction-ui/react-presence-indicator'
export function MyComponent() {
return <PresenceIndicator status="online" showLabel />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | 'online' | 'away' | 'busy' | 'offline' | -- | Current presence status. |
showLabel | boolean | false | Show status label text. |
className | string | -- | Additional CSS classes. |