The smallest possible status
Where Badge carries a text label on a tinted fill, the status dot is the mark alone: a dot in one of the five status roles, for table rows, avatars, and nav items where a full badge is too loud. An optional pulse says something is live right now.
Variants
Sizes
Outline
The outline draws the dot hollow, for a settled or empty state that still holds its seat beside filled dots. Together with the pulse it gives a list one reading: fill says whether a row wants attention, colour says what it wants, and motion says it is live.
Pulse
The pulse radiates a ring of the dot's own colour, for the states that are happening as the visitor watches: recording, online now, a deploy in flight. It stills under reduced motion.
In context
A bare dot beside an avatar or a row label leans on its neighbour for meaning; pass an aria-label so a screen reader hears what the colour says.
// From the npm package
import { StatusDot } from 'rift-ds/components/StatusDot/StatusDot';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/status-dot.json