Design Systemv0.21.0

feedback/@mihcm/ui·v0.21.0·stable

NotificationBadge

Tiny counter dot that overlays a parent (the bell icon, an inbox icon, etc.). Renders inside any position: relative container; absolutely-positions in the chosen corner.

Configurator Examples Usage Accessibility Api

Bell button

import { NotificationBadge } from '@mihcm/ui/NotificationBadge';
 
<button
  type="button"
  aria-label="Notifications, 5 unread"
  className="relative inline-flex h-10 w-10 items-center justify-center"
>
  <BellIcon />
  <NotificationBadge count={5} />
</button>;

Capped count

<NotificationBadge count={150} max={99} /> // renders "99+"

Dot mode (no number)

<button type="button" aria-label="What's new — new content available" className="relative">
  <SparkleIcon />
  <NotificationBadge dot tone="accent" />
</button>

Yashi

<div className="relative inline-block">
  <Avatar size="lg">
    <AvatarImage src="/people/alex-kim.svg" alt="Yashi" />
    <AvatarFallback>YA</AvatarFallback>
  </Avatar>
  <NotificationBadge dot tone="primary" placement="bottom-right" />
</div>