Dot

Dot is the most minimal status indicator — a colored circle with no text. Use it inline next to a label, in a status list, or as a presence indicator. When you want status with text, use Badge.

Use it for

• Online/offline presence indicators next to user names
• Status lists where the row label provides the context ("Helicone •" + "Stripe •")
• Compact status indicators in dense table cells
• Activity feeds where the dot pulses to indicate live state

Import

import { Dot } from '@brikdesigns/bds';

Variants

Status colors

• default — Brand primary. General-purpose indicator.
• positive — Online, success, operational.
• warning — Away, attention needed.
• error — Offline, failure, outage.
• info — Informational, in-progress.
• neutral — Inactive, disabled.

Sizes

Pulse

Use pulse for active/running states — a continuously running process, a live feed, an in-progress sync.

<Dot status="positive" pulse />

Pattern: inline with label

<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
  <Dot status="positive" />
  <span>Online</span>
</div>

When not to use

• Don't rely on color alone to convey status. Always pair with a text label (visible or aria-label). Color-only state is inaccessible.
• Don't use Dot when a value is meaningful. "5 unread" is a Counter, not a Dot.

Accessibility

• Renders a <span>. Pair with a visible text label or pass aria-label on the parent container.
• Status is communicated via color and text — never color alone.

API

Related

• Badge — status with text
• Counter — numeric status
• Storybook playground