Status Dot

Basic

All Tones

Inside a Badge

Inline With Text

Standalone, Announced

When the dot stands alone with no adjacent label — e.g. as a cell in a dense table where the column header carries the meaning — supply aria-label to make the dot announce itself as a labeled image.

Installation

npx visor add status-dot

This copies the component into your project:

• components/ui/status-dot/status-dot.tsx — the component
• components/ui/status-dot/status-dot.module.css — the styles

Usage

import { StatusDot } from '@/components/ui/status-dot/status-dot';

export default function Example() {
  return <StatusDot tone="mint" />;
}

API Reference

StatusDotProps

No props data available for “status-dot”.

Tone → Token Mapping

The dot reuses the same saturated semantic tokens StatusBadge uses for its leading indicator, so the two read as one coherent system across admin surfaces.

Accessibility

The dot is decorative by default — aria-hidden="true" is set so assistive tech ignores it, and the surrounding label is expected to carry the semantic meaning. When the dot stands alone with no adjacent label, supply aria-label; this flips the element into a labeled image (role="img") that screen readers announce.

Color alone is never sufficient to communicate status. When using StatusDot inline, always pair it with a text label, or — for the standalone case — use the aria-label prop.

Source Files

After running npx visor add status-dot, you'll have:

status-dot.tsx

A forwardRef component that renders a single <span> with data-slot and data-tone attributes. No state, no behaviour — purely visual.

status-dot.module.css

A single base rule and five tone rules keyed by data-tone. The 6px size and circular radius are intentional and fixed — for larger callouts, use StatusBadge instead.

Customization

After copying the component, you own it completely. Common customizations:

• Add a new tone (e.g. accent) by adding a data-tone="accent" rule that references the desired semantic token.
• Swap the size by editing the width/height values — the border-radius: 9999px handles any square size as a circle.
• Add a pulse animation for in-flight states by porting the keyframes from StatusBadge.