Component

Status Indicator

Colored status dots with labels and optional pulse animation for system status displays. Uses the headless @refraction-ui/status-indicator core.

Examples

Five status types with colors and optional pulse.

OperationalDegradedOutageMaintenanceUnknown

Installation

$pnpm add @refraction-ui/react-status-indicator

Usage

tsx

import { StatusIndicator } from '@refraction-ui/react-status-indicator'
export function MyComponent() {
  return <StatusIndicator status="success" label="Operational" pulse />
}

Props

Prop	Type	Default	Description
`status`	`'success' \| 'warning' \| 'error' \| 'info' \| 'neutral'`	--	Status type with corresponding color.
`label`	`string`	--	Status label text.
`pulse`	`boolean`	`false`	Enable pulse animation.
`className`	`string`	--	Additional CSS classes.