Notification Badge — Veritheme

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

3

12

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

JD

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

7

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>

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-[10px] vt-font-bold`	Typography	Count badge text — small and 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"