Dot

The Dot component is StatusPill's quieter sibling — a bare status indicator with an optional label, sized for dense table cells and list rows where a full pill is too loud. The color map is shared with StatusPill so screens stay consistent.

Import

import { Dot } from '@nim-ui/components';

Statuses

<Dot status="active">Active</Dot>
<Dot status="pending">Pending</Dot>
<Dot status="processing">Processing</Dot>
<Dot status="success">Success</Dot>
<Dot status="warning">Warning</Dot>
<Dot status="failed">Failed</Dot>
<Dot status="blocked">Blocked</Dot>
<Dot status="archived">Archived</Dot>

Sizes

sm is the default — tuned for table density.

<Dot status="active" size="sm">Small</Dot>
<Dot status="active" size="md">Medium</Dot>
<Dot status="active" size="lg">Large</Dot>

Live state

pulse signals in-flight work — reserve it for genuinely live states.

<Dot status="processing" pulse>Syncing inventory</Dot>
<Dot status="warning" pulse>Retrying webhook</Dot>

Bare dots

Without a visible label the dot is colour-only, so the status has to be carried as real text — pass srLabel.

An aria-label on Dot does not work: the wrapper is a role-less <span>, and its implicit generic role prohibits an accessible name, so browsers never expose it and screen readers announce nothing. (role="img" is not the fix either — it prunes descendant text, which would break the labelled form above.)

srLabel renders screen-reader-only text as a direct child of the wrapper, so it stays out of flow and the dot keeps its exact 6px footprint. Hand-rolling it as a child instead — <Dot><span className="sr-only">…</span></Dot> — routes it through the label wrapper, which is a flex item, and gap-1.5 silently doubles the dot's width. srLabel is ignored when children are present, so a labelled dot can never announce twice.

<Dot status="active" srLabel="Active" />
<Dot status="warning" srLabel="Warning" />
<Dot status="failed" srLabel="Failed" />

Props

Accessibility

• The dot itself is aria-hidden — the label carries the meaning.
• Visually bare dots need srLabel, not an aria-label: the wrapper is a role-less <span> (generic role), which prohibits naming, so an aria-label is silently dropped by the browser.
• Color alone never conveys state: pair bare dots with a visible label elsewhere in the row, or use the labeled form.

Best Practices

Do

• Use Dot inside DataTable cells where StatusPill would dominate the row
• Keep the shared status vocabulary — don't invent per-screen color meanings
• Use pulse only while something is actually happening

Don't

• Mix Dot and StatusPill for the same status column
• Use Dot as a decorative bullet — it's a status primitive

Related Components

• StatusPill - Full status pill with background
• DataTable - Dense operational tables
• Badge - General-purpose labels