Balance Logo
Balance
Reckon Design System

Notification Badge

Use the notification badge to display a numeric value, or indicator, to users.
Install
pnpm add @reckon-web/notification-badge
Import usage
import {
NotificationBadge
} from '@reckon-web/notification-badge';
  • Code
  • API

Usage

A notification badge is a visual indicator for numeric values such as tallies and scores.

123
Open in Playroom

Status

Use the status property to indicate the intent behind a given value. Loosely these are:

  • default no intent, simple tally
  • inprogress new or updated counts
  • rejected call attention to important counts
  • resolved completed or resolved tasks
12
23
34
45

Max

Use the max property where the count is expected to exceed a reasonable number, and the exact count is not particularly valuable to the user.

99+

Valueless (Dot)

When no value is provided, the compenent resolves to a simple dot.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.