XDS — Design System

StatusDot@xds/core · XDSStatusDot v0.0.13

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.

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

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.

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" />;
}

Usage

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

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.

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> ); }

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> ); }

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> ); }