StatusDot

feedback

Inline status indicator with colored dot, label, and optional pulse animation. Five variants: success, warning, error, info, neutral. Token-driven colors and sizing.

Import

typescript
import { StatusDot } from "packages/ui/src";

Props

StatusDotProps

PropTypeRequired
variantStatusDotVariantNo
labelstringNo
pulsebooleanNo

Examples

Status Dot

Inline status indicator with colored dot, label, and optional pulse animation.

Variants

DeployedBuildingFailedQueuedIdle

With Pulse

LiveProcessingAlert

Dot Only (no label)

Metadata

Component Metadata
Familyfeedback
FrameworksNext.js, Astro/EmDash
DescriptionInline status indicator with colored dot, label, and optional pulse animation. Five variants: success, warning, error, info, neutral. Token-driven colors and sizing.
PropsStatusDotProps (variant?: StatusDotVariant, label?: string, pulse?: boolean)
Statessuccess, warning, error, info, neutral, pulsing
A11y
  • Container has role=status
  • aria-label combines variant and label
  • Dot is aria-hidden
Responsive
  • Inline-flex by default
  • Wraps with text
Motion
  • Optional pulse animation on dot
Token Dependencies
  • components.statusDot.dotSize
  • components.statusDot.gap
  • components.statusDot.labelColor
  • components.statusDot.labelFontSize
  • components.statusDot.successColor
  • components.statusDot.warningColor
  • components.statusDot.errorColor
  • components.statusDot.infoColor
  • components.statusDot.neutralColor
  • components.statusDot.pulseScale
Content Slotslabel (string)
CMS Bindings
  • Status from CMS field
  • Label from CMS data
Test Cases
  • Renders dot
  • Has role=status
  • Shows label text
  • Success variant has success class
  • Error variant has error class
  • Dot is aria-hidden
  • Pulse adds pulse class
  • Passes className through