Home
Previous componentNext component

Status dot

Open in fibo's StorybookOpen in Figma

A status dot says whether someone is present, away or offline. Put it in an avatar, a sticker avatar or a badge; the part it sits in places it. The three states are a dot, a crescent and a ring, so they read without colour, and a page-coloured disc behind the mark keeps a clear edge on a photo or a sticker.

Present
Status dotPresent, at the default size.

Examples

presentawayoffline
Status by shapePresent is a dot, away a crescent, offline a ring.
PresentAwayOffline
Without colourMono draws the marks in the text colour, for places where colour would compete, such as a dense list.
PresentPresentPresentPresent
Sizesxs, sm, default and lg: 8, 10, 12 and 16 pixels.
BOPresentBOPresentBOPresentAway
On avatarsAvatar pins it to the corner. Sticker avatar sets it on the paper, turned against the tilt, and adds its label to the sticker's name.
OnlineAwayOffline
In a badgeA badge leads with it. The badge's text already says the status, so the dot gets label={null}.

Anatomy

A page-coloured disc with the mark on it, plus a visually hidden label.

Away
  1. Disc
  2. Mark
The dotAway, drawn large.

Guidelines

  • 01Use it for presence: whether someone is here, away or gone. For a state of a thing, such as Paid or Failed, use a Badge.
  • 02Pass label to translate the status, or to say it the way your product does, such as Online or Here.
  • 03Keep it on the avatar or in the badge it belongs to, not floating beside a name on its own.
  • 04Use mono where colour would compete; the shapes still tell the states apart.

Best practices

Away
DoSilence the dot when the word beside it says the status.
AwayAway
Don'tDon't let both speak, or screen readers hear the status twice.

Accessibility

There's nothing to focus: the dot only reports, so it never enters the tab order.

  • 01The status is in a visually hidden span, read after whatever comes before it: the photo's alt in an Avatar, the name in a Sticker avatar.
  • 02A Sticker avatar is one image to screen readers, so the dot's label joins its name through aria-labelledby: Ana Ruiz, Away.
  • 03Shape carries the status as well as colour, so it holds for colour blindness and in mono.