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
SyncingOperationalDegradedDownOffline
Sizes
SmallMediumLarge
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.
DeployingLiveRecording
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.
Ada FieldingOnline
Noor CaseyAway
Jules MarrOffline
// 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