InkUI
Components

StatusIndicator

Colored dot and label showing real-time status. Animates for loading states.

A colored dot with a status label. The dot animates for loading/syncing states. Useful for showing service health, connection status, or background worker states.

Live Preview
StatusIndicator · service health
●API Server
●Database
●Build Queue
◈Cache
○Worker(offline)
~/my-cli — node v22● running

Installation

npx inkui add status-indicator

Usage

import { StatusIndicator } from './components/ui/status-indicator';
 
<StatusIndicator status="online" label="API Gateway" />

Examples

<StatusIndicator status="online"  label="API Gateway" />
<StatusIndicator status="loading" label="Syncing database..." />
<StatusIndicator status="warning" label="High memory usage" />
<StatusIndicator status="error"   label="Redis connection failed" />
<StatusIndicator status="offline" label="CDN node 3" />
<StatusIndicator status="idle"    label="Background worker" />

Force pulse animation

<StatusIndicator status="online" label="Watching files..." pulse />

Props

PropTypeDefaultDescription
status'online' | 'offline' | 'loading' | 'warning' | 'error' | 'idle'—Status value (required)
labelstring—Description text (required)
pulsebooleanauto for loadingAnimate the dot
themeInkUIThemedarkThemeColor theme

Previous

Toast

Next

LoadingBar

On this page