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

Six status types — pulse is on by default for pending.

OperationalDegradedOutageMaintenanceReconnectingUnknown

Composable label

When label is omitted, children become the visible label. String children also derive the aria-label.

Microphone · Built-in · readyAPI pipeline · Missing keysNetwork · degraded throughputReconnecting to host…

Dot only

showLabel={false} hides the visible label but keeps the aria-label — useful in dense tables.

Dot only — screen reader still announces each status

Installation

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

Usage

tsx

import { StatusIndicator } from '@refraction-ui/react'

export function ConnectionRows() {
  return (
    <div className="space-y-2">
      {/* Explicit label */}
      <StatusIndicator type="success" label="Operational" pulse />

      {/* Composable children — matches the rest of refraction-ui (Card / Dialog / Callout) */}
      <StatusIndicator type="success">Microphone · Built-in · ready</StatusIndicator>

      {/* Dot only — aria-label still announces */}
      <StatusIndicator type="error" label="API offline" showLabel={false} />
    </div>
  )
}

Props

Prop	Type	Default	Description
`type`	`'success' \| 'error' \| 'warning' \| 'info' \| 'pending' \| 'neutral'`	--	Status kind. Drives the dot color and the derived aria-label.
`label`	`string`	--	Explicit text label. Takes precedence over children.
`children`	`ReactNode`	--	Composable label content. Used when `label` is omitted (issue #200). String children also derive the aria-label.
`pulse`	`boolean`	`type === 'pending'`	Animated pulse ring. Defaults on for `pending`.
`showLabel`	`boolean`	`true`	Render the visible label span. Set to `false` for dot-only mode — the aria-label is still announced.
`className`	`string`	--	Additional CSS classes on the wrapper.