StatusDot

Compact presence/status indicator. Pair with visible text or an aria-label — the dot alone is decorative.

Examples

Default

A filled success dot labeled for assistive tech.

import { StatusDot } from '@var-ui/react';

<StatusDot tone="success" appearance="filled" aria-label="Online" />

Tones and pulse

Use semantic tones for status, and pulse for in-progress states (respects reduced motion).

import { StatusDot } from '@var-ui/react';

<span>
  <StatusDot tone="success" aria-label="Online" /> Online
</span>
<span>
  <StatusDot tone="info" pulse aria-label="Syncing" /> Syncing
</span>

Props

Accessibility

Provide an aria-label when the meaning isn’t in adjacent text (sets role="img"). Prefer visible labels for color-blind users; pulse animation is disabled under prefers-reduced-motion.