Skip to main content

Notification Counter

Live

The Notification counter component alerts users to new or unread activity requiring their attention.

Figma(opens in new window)Code(opens in new window)

Usage​

The Notifications counter features a counter that updates in realtime to provide a quick status overview without requiring the user to open a section. It can be overlaid on an icon, within a button, or inline with text to indicate the number of unseen or unread items. It helps users quickly identify areas that need their attention, such as new messages, alerts, updates.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { NotificationCounter } from "@iag/chroma-react-ui.components";

When to use​

Use Notification counters to draw attention to new or unread content such as notifications, emails or offers.

When to avoid​

Avoid using Notification counters if the number is not meaningful or actionable. Also avoid if the number is not changed by the user viewing the items, instead consider rounded Badges for static numbers.

Do

  • Do ensure it has sufficient contrast with the background it’s placed on for accessibility.
  • Do pair with meaningful icons or labels.
  • Do set max values where the count has the potential to exceed a reasonable number, and the exact count is no longer valuable to the user. For example, 99+.

Don't

  • Don’t show the counter when the number is 0.
  • Don’t overload the user with multiple counters in close proximity.
  • Don’t use it as the only indicator of important updates.