XDS — Design System

XDSStatusDot@xds/core · StatusDot

Usage

A small colored dot that communicates status like online/offline presence or severity levels. Supports five semantic variants and an optional pulse animation. Always pair with a visible text label, as color alone should not carry meaning.

Best practices

Guidance	Practices
Do	Always pair with a visible text label so status is not conveyed by color alone.
Do	Provide a descriptive `label` prop for screen reader accessibility.
Don't	Use the pulse animation for purely decorative purposes — reserve it for states that require immediate attention.
Don't	Rely on color alone to communicate status — always include text.

Import

ts
import {XDSStatusDot} from '@xds/core/StatusDot'

Props

Prop	Type	Description
variantrequired	'positive' \| 'warning' \| 'negative' \| 'info' \| 'neutral'	Semantic color variant.
labelrequired	string	Accessible label surfaced via aria-label.
isPulsing	boolean (default: false)	Enables a pulse animation; respects prefers-reduced-motion: reduce.
xstyle	StyleXStyles	StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value — not an inline style object like style={{}}.

Examples

Common configurations, variations, and states.

StatusDot — PulsingAnimated pulsing dots for live, processing, and error states.

tsx
'use client';
import {XDSStatusDot} from '@xds/core/StatusDot';
import {XDSHStack} from '@xds/core/Layout';
export default function StatusDotPulsing() {
  return (
    <XDSHStack gap={2} vAlign="center">
      <XDSStatusDot variant="positive" label="Live" isPulsing />
      <XDSStatusDot variant="warning" label="Processing" isPulsing />
      <XDSStatusDot variant="negative" label="Error" isPulsing />
    </XDSHStack>
  );
}

StatusDot — Status IndicatorsLabeled status dot list for presence indicators like online, away, and offline.

tsx
'use client';
import {XDSStatusDot} from '@xds/core/StatusDot';
import {XDSVStack, XDSHStack} from '@xds/core/Layout';
import {XDSText} from '@xds/core/Text';
const statuses = [
  {variant: 'positive', label: 'Online'},
  {variant: 'warning', label: 'Away'},
  {variant: 'negative', label: 'Offline'},
  {variant: 'neutral', label: 'Unknown'},
] as const;
export default function StatusDotStatusIndicators() {
  return (
    <XDSVStack gap={2}>
      {statuses.map(({variant, label}) => (
        <XDSHStack key={variant} gap={2} vAlign="center">
          <XDSStatusDot variant={variant} label={label} />
          <XDSText type="body">{label}</XDSText>
        </XDSHStack>
      ))}
    </XDSVStack>
  );
}

StatusDot — VariantsAll five semantic color variants displayed in a row.

tsx
'use client';
import {XDSStatusDot} from '@xds/core/StatusDot';
import {XDSHStack} from '@xds/core/Layout';
export default function StatusDotVariants() {
  return (
    <XDSHStack gap={2} vAlign="center">
      <XDSStatusDot variant="positive" label="Positive" />
      <XDSStatusDot variant="warning" label="Warning" />
      <XDSStatusDot variant="negative" label="Negative" />
      <XDSStatusDot variant="info" label="Info" />
      <XDSStatusDot variant="neutral" label="Neutral" />
    </XDSHStack>
  );
}

Showcase source

tsx
'use client';
import {XDSStatusDot} from '@xds/core/StatusDot';
export default function StatusDotShowcase() {
  return <XDSStatusDot variant="positive" label="Online" />;
}