Notification Badge

Notification badges are small status indicators used to draw attention to new, unread, or important information. They are typically attached to icons, buttons, or navigation items and come in different colors depending on the type of message (e.g., info, success, warning, critical).

Examples

Dot Badges

Count Badges

9999

When to Use Notification Badges

To signal new activity, alerts, or unread messages.
To convey status updates or metadata on an element.
Use numbers when count matters, or dots when presence is enough.

Accessibility Considerations

Add aria-label to describe the meaning of the badge, such as aria-label="9 unread messages".
Use semantic HTML to ensure screen readers interpret badges appropriately.
Avoid relying on color alone — ensure the meaning is also expressed with text or accessible context.

Token Reference

The following tokens are used for notification badge colors.

info

State	Design Token Name	Color Value
bg	--base-info-bg	#ccc
data	--base-info-data	#ccc
accent	--base-info-accent	#ccc
label	--base-info-label	#ccc

success

State	Design Token Name	Color Value
bg	--base-success-bg	#ccc
data	--base-success-data	#ccc
accent	--base-success-accent	#ccc
label	--base-success-label	#ccc

warning

State	Design Token Name	Color Value
bg	--base-warning-bg	#ccc
data	--base-warning-data	#ccc
accent	--base-warning-accent	#ccc
label	--base-warning-label	#ccc

critical

State	Design Token Name	Color Value
bg	--base-critical-bg	#ccc
data	--base-critical-data	#ccc
accent	--base-critical-accent	#ccc
label	--base-critical-label	#ccc

Example HTML

<span class="notification-badge badge-dot badge-info" aria-label="Info status"></span>
<span class="notification-badge badge-dot badge-success" aria-label="Success status"></span>

<span class="notification-badge badge-count badge-warning" aria-label="3 warnings">3</span>
<span class="notification-badge badge-count badge-critical" aria-label="9 critical errors">9</span>

CSS

.notification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.notification-badge.info {
  background-color: var(--base-info-data);
}

.notification-badge.success {
  background-color: var(--base-success-data);
}

.notification-badge.warning {
  background-color: var(--base-warning-data);
}

.notification-badge.critical {
  background-color: var(--base-critical-data);
}

Badges should always be concise and complement the surrounding UI without overwhelming it.

Examples​

Dot Badges​

Count Badges​

When to Use Notification Badges​

Accessibility Considerations​

Token Reference​