Components · Status

Badge Dot

A dot is a small status marker without text, next to a label or on the corner of an icon.

Every example on this page is the real component. Figma: Dot.

Playground

Choose state and size. The dot is the same at every breakpoint, so there is no breakpoint control. A dot is shown next to a label here; on its own it carries no meaning.

Size

Markup for this selection

HTML




Overview
A dot is a small colored circle, without text, that marks a status. Use it next to a text or an icon, or on the top right corner of an icon or a text, to show that a status has changed or that something needs attention.
A short summary lives here; the three pages are: Examples & Guidelines (this page), Specifications and Code.




Usage
When to use
  • Show that a status has changed, next to a label.
  • Draw attention to an icon or a text link: place the dot on its top right corner.
  • Give more weight to an existing status with a color.
When not to use
  • On its own. A dot never stands alone: it needs a label or an icon next to it.
  • For critical alerts. Dots are an indication, not an alert: use an inline notification.
  • Stacked, or close to other dots.
  • As the only carrier of meaning: color is not enough (WCAG 1.4.1).
Quick reference
The element…Use
marks a changed status next to a textDot
shows a countNumber
shows a status with a wordBasic
must be noticedInline notification
 Messages
Do put the dot next to a label.
Do not stack dots or put them close together.




Anatomy
  1. Dot. A circle without text. Its color is the status: Danger, Warning, Success, Information or Neutral. Large 10px, Medium 8px, Small 6px.
  2. Label or icon. Not part of the dot. A dot sits next to a text, or on the top right corner of an icon, and the label says what the status is.




Variants
Five states in three sizes.
StateLargeMediumSmall
Danger
Warning
Success
Information
Neutral




Sizes
Large is 10px, Medium 8px and Small 6px. The size is the same at every breakpoint.
SizeDiameterClass
Large (default)10pxbadge-dot
Medium8pxbadge-dot--md
Small6pxbadge-dot--sm




Layout & Appearance
Placement
Use a dot next to a text, or on the top right corner of an icon or of a text. Keep the dot away from other dots.
 Messages
Next to a text.
On the top right corner of an icon.




Accessibility
A dot has no text. All requirements are listed under Accessibility Requirements in Specifications.
Screen reader support
A dot is decorative: aria-hidden="true". If the status matters, say it in text: next to the dot, in an aria-label on the icon button (“Messages, new”) or in visually hidden text.
Color is not the only carrier
Pair the dot with a label or an icon that says the same thing.







References