Get started
Data display
Data entry
General
Layout
Navigation
Blocks
Packages
A small decorative dot colored by a semantic status tone (online, offline, busy or idle), which can pulse for a state still in progress.
Online
Connecting
Idle
Busy
Offline
tsx
1
2
3import type { ReactNode } from 'react';
import { StatusIndicator } from '@/registry/bases/base-ui/components/feedback/status-indicator';Installation#
bash
pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/status-indicator.jsonUsage#
tsx
import { StatusIndicator } from '@/components/feedback/status-indicator';The dot is hidden from assistive technology, so the text beside it carries the status:
tsx
<div className="flex items-center gap-2">
<StatusIndicator tone="online" />
<span>Online</span>
</div>It is not for an identity colour, and not for an unsaved-changes flag, which is Unsaved Indicator.
API reference#
StatusIndicator#
Renders a span and takes every prop a span takes, plus:
| Prop | Type | Default |
|---|---|---|
tone | 'online' | 'offline' | 'busy' | 'idle' | required |
pulse | boolean | false |
Offline draws as a hollow ring rather than a fill. It sets data-slot="status-indicator", data-tone to
its tone, data-pulse while it pulses, and aria-hidden.