Notification Badge

Default

Simple notification dots on icon buttons.

html

<div class="uc-relative uc-inline-flex">
  <button class="uc-w-10 uc-h-10 uc-rounded-2xl uc-border uc-border-border-default uc-bg-neutrals-surface">
    <svg>...</svg>
  </button>
  <span class="uc-absolute uc--top-1 uc--right-1 uc-w-3 uc-h-3 uc-rounded-full uc-bg-accents-red uc-ring-2 uc-ring-neutrals-background"></span>
</div>

With Count

Badges showing numeric counts positioned on icon buttons.

html

3

12

99+

<div class="uc-relative uc-inline-flex">
  <button class="uc-w-10 uc-h-10 uc-rounded-2xl uc-border uc-border-border-default uc-bg-neutrals-surface">
    <svg>...</svg>
  </button>
  <span class="uc-absolute uc--top-1.5 uc--right-1.5
    uc-inline-flex uc-items-center uc-justify-center
    uc-min-w-5 uc-h-5 uc-px-1 uc-text-[10px] uc-font-bold
    uc-rounded-full uc-bg-accents-red uc-text-constant-white
    uc-ring-2 uc-ring-neutrals-background">3</span>
</div>

Colors

Notification dots in different semantic colors.

html

Red

Blue

Green

Orange

<span class="... uc-bg-accents-red ..."></span>   <!-- Red -->
<span class="... uc-bg-accents-blue ..."></span>  <!-- Blue -->
<span class="... uc-bg-accents-blue ..."></span> <!-- Green -->
<span class="... uc-bg-accents-orange ..."></span> <!-- Orange -->

On Avatars

Status indicator dots on avatar circles.

html

Online

Busy

Away

JD

Offline

<div class="uc-relative uc-inline-flex">
  <div class="uc-w-10 uc-h-10 uc-rounded-full uc-bg-neutrals-muted uc-overflow-hidden">
    <img src="..." alt="User" />
  </div>
  <span class="uc-absolute uc-bottom-0 uc-right-0 uc-w-3 uc-h-3
    uc-rounded-full uc-bg-accents-blue
    uc-ring-2 uc-ring-neutrals-background"></span>
</div>

On Text / Tab

Badge counts next to text labels.

html

Inbox 3

Messages 12

Notifications 99+

<div class="uc-inline-flex uc-items-center uc-gap-2">
  <span class="uc-text-sm uc-font-medium">Inbox</span>
  <span class="uc-inline-flex uc-items-center uc-justify-center
    uc-min-w-5 uc-h-5 uc-px-1.5 uc-text-[10px] uc-font-bold
    uc-rounded-full uc-bg-accents-red uc-text-constant-white">3</span>
</div>

Animated

Notification dots with a ping animation to draw attention.

html

Static

Pinging

7

Pinging count

Online ping

<div class="uc-relative uc-inline-flex">
  <button class="uc-w-10 uc-h-10 uc-rounded-2xl uc-border uc-border-border-default uc-bg-neutrals-surface">
    <svg>...</svg>
  </button>
  <span class="uc-absolute uc--top-1 uc--right-1 uc-flex uc-h-3 uc-w-3">
    <span class="uc-animate-ping uc-absolute uc-inline-flex uc-h-full uc-w-full uc-rounded-full uc-bg-accents-red uc-opacity-75"></span>
    <span class="uc-relative uc-inline-flex uc-rounded-full uc-h-3 uc-w-3 uc-bg-accents-red uc-ring-2 uc-ring-neutrals-background"></span>
  </span>
</div>

API Reference

All CSS classes available for the Notification Badge component.

Class	Type	Description
`uc-relative uc-inline-flex`	Container	Relative container for absolute badge positioning
`uc-absolute uc--top-1 uc--right-1`	Position	Dot badge position — offset to top-right corner
`uc-absolute uc--top-1.5 uc--right-1.5`	Position	Count badge position — slightly more offset for larger badge
`uc-w-3 uc-h-3 uc-rounded-full`	Size	Dot indicator size (12px circle)
`uc-min-w-5 uc-h-5 uc-px-1`	Size	Count badge size — expands with content
`uc-text-[10px] uc-font-bold`	Typography	Count badge text — small and bold
`uc-bg-accents-red uc-text-constant-white`	Color	Default red badge with white text
`uc-bg-accents-blue`	Color	Blue badge variant for informational status
`uc-bg-accents-orange`	Color	Orange badge variant for warning status
`uc-ring-2 uc-ring-neutrals-background`	Effect	White ring to separate badge from parent element
`uc-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"