MiHCM
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.

ConfiguratorExamplesUsageAccessibilityApi

Use cases

  • Unread counts on icons — bell, inbox, messages, tasks.
  • "New" indicator without a number (dot prop) — signal availability without quantification.

When NOT to use

  • For a chip with text → use StatusBadge or Badge.
  • For a counter that isn't an overlay → render the number inline as text.

Composition

The badge absolutely-positions itself in the chosen corner of its parent. The parent must be position: relative (web) or a wrapping <View> (native):

<div className="relative">
  <BellIcon />
  <NotificationBadge count={5} />
</div>

Count behaviour

  • count={0} and count={undefined} hide the badge — no empty pill on the icon.
  • count > max collapses to ${max}+ (default cap 99).
  • Pass children to override the rendered label (e.g. a localised "many" word).

Tones

ToneUse when
dangerAlerts, critical unread (default).
warningPending actions that aren't blocking.
accentBrand-orange — new content, "What's new" feed.
primaryBrand-navy — quieter, app-chrome counts.

Placement

top-right is the convention. top-left / bottom-* exist for RTL layouts and unusual host shapes (a profile menu with the badge under the avatar).

  • Badge — text pill inline with content (not a counter overlay).
  • StatusBadge — semantic state indicator with icon and tone.
  • Avatar — common host element for a notification dot.