Status Indicator / Dot

Colored dot with a label for live states (online, degraded, offline), optionally pulsing.

Import

import { StatusIndicator } from '@marbleui/ui'

Props

<StatusIndicator>

Prop	Type	Default	Description
className	`string`	`—`
label	`ReactNode`	`—`
pulse	`boolean`	`—`	Ping animation for live / in-progress states.
size	`'sm' \| 'md'`	`'md'`
tone	`'accent' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	`'success'`

Usage notes

Coloured dot plus label for live or system states (online, degraded, deploying). For a static category label use Badge; for presence on a person use Avatar with status.

<StatusIndicator tone="success" pulse label="3 online" />
<StatusIndicator tone="danger" label="Major outage" />

tone is success (default), warning, danger, accent or neutral; size is sm or md.
pulse adds a ping animation, which is hidden when the user prefers reduced motion.
The dot has no accessible name of its own, so always give a label that states the status in words.

Example source · show

import { StatusIndicator } from './status-indicator'

export const styles = {
  Tones: () => (
    <div className="flex flex-col gap-2">
      <StatusIndicator tone="success" label="Operational" />
      <StatusIndicator tone="warning" label="Degraded performance" />
      <StatusIndicator tone="danger" label="Major outage" />
      <StatusIndicator tone="neutral" label="Paused" />
    </div>
  ),
  Live: () => (
    <div className="flex flex-col gap-2">
      <StatusIndicator tone="danger" pulse label="Recording" />
      <StatusIndicator tone="accent" pulse label="Deploying…" />
      <StatusIndicator tone="success" pulse size="sm" label="3 online" />
    </div>
  ),
}

Source: packages/ui/src/status-indicator/status-indicator.tsx

Catalog