Notification Badge

Small indicators for counts, status, or attention on elements.

Default

Simple notification dots on icon buttons.

html

<div class="vt-relative vt-inline-flex">
  <button class="vt-notification-btn">
    <svg>...</svg>
  </button>
  <span class="vt-absolute vt--top-1 vt--right-1 vt-w-3 vt-h-3 vt-rounded-full vt-bg-error-primary vt-ring-2 vt-ring-surfaces-background"></span>
</div>

With Count

Badges showing numeric counts positioned on icon buttons.

html

99+

<div class="vt-relative vt-inline-flex">
  <button class="vt-notification-btn">
    <svg>...</svg>
  </button>
  <span class="vt-count-badge vt-absolute vt--top-1.5 vt--right-1.5">3</span>
</div>

Colors

Notification dots in different semantic colors.

html

Red

Blue

Green

Orange

<span class="... vt-bg-error-primary ..."></span>   <!-- Red -->
<span class="... vt-bg-info-primary ..."></span>  <!-- Blue -->
<span class="... vt-bg-info-primary ..."></span> <!-- Green -->
<span class="... vt-bg-warning-primary ..."></span> <!-- Orange -->

On Avatars

Status indicator dots on avatar circles.

html

Online

Busy

Away

Offline

<div class="vt-relative vt-inline-flex">
  <div class="vt-w-10 vt-h-10 vt-rounded-full vt-bg-surfaces-moderate vt-overflow-hidden">
    <img src="..." alt="User" />
  </div>
  <span class="vt-absolute vt-bottom-0 vt-right-0 vt-w-3 vt-h-3
    vt-rounded-full vt-bg-info-primary
    vt-ring-2 vt-ring-surfaces-background"></span>
</div>

On Text / Tab

Badge counts next to text labels.

html

Inbox 3

Messages 12

Notifications 99+

<div class="vt-inline-flex vt-items-center vt-gap-2">
  <span class="vt-text-sm vt-font-medium">Inbox</span>
  <span class="vt-count-badge vt-px-1.5">3</span>
</div>

Animated

Notification dots with a ping animation to draw attention.

html

Static

Pinging

Pinging count

Online ping

<div class="vt-relative vt-inline-flex">
  <button class="vt-notification-btn">
    <svg>...</svg>
  </button>
  <span class="vt-absolute vt--top-1 vt--right-1 vt-flex vt-h-3 vt-w-3">
    <span class="vt-animate-ping vt-absolute vt-inline-flex vt-h-full vt-w-full vt-rounded-full vt-bg-error-primary vt-opacity-75"></span>
    <span class="vt-relative vt-inline-flex vt-rounded-full vt-h-3 vt-w-3 vt-bg-error-primary vt-ring-2 vt-ring-surfaces-background"></span>
  </span>
</div>

Guidelines

Dot or count indicator overlaid on a bell/icon (error-red dot = attention).

Use a small red dot to flag unseen items needing attention.

Don't

Don't put attention dots on every icon at once.

API Reference

All CSS classes available for the Notification Badge component.

Class	Type	Description
`vt-relative vt-inline-flex`	Container	Relative container for absolute badge positioning
`vt-absolute vt--top-1 vt--right-1`	Position	Dot badge position — offset to top-right corner
`vt-absolute vt--top-1.5 vt--right-1.5`	Position	Count badge position — slightly more offset for larger badge
`vt-w-3 vt-h-3 vt-rounded-full`	Size	Dot indicator size (12px circle)
`vt-min-w-5 vt-h-5 vt-px-1`	Size	Count badge size — expands with content
`vt-text-xs vt-font-bold`	Typography	Count badge text — 12px bold
`vt-bg-error-primary vt-text-generic-white`	Color	Default red badge with white text
`vt-bg-info-primary`	Color	Blue badge variant for informational status
`vt-bg-warning-primary`	Color	Orange badge variant for warning status
`vt-ring-2 vt-ring-surfaces-background`	Effect	White ring to separate badge from parent element
`vt-animate-ping`	Animation	Pulsing animation to draw attention

Accessibility

Keyboard and screen reader support.

Feature	Details
Screen reader	Badge count should have aria-label, e.g. "5 notifications"
Hidden badge	Visual-only dot indicators need sr-only text describing the status
Updates	Dynamic count changes should use aria-live="polite" to announce updates
Decorative	If count is also shown elsewhere, badge can be aria-hidden="true"

Built with:

Badge Button