Balance Logo
Balance
Reckon Design System

Badge

A badge is a decorative indicator used to either call attention to an item or for communicating non-actionable, supplemental information.
Install
pnpm add @reckon-web/badge
Import usage
import {
Badge,
IndicatorDot,
NotificationBadge
} from '@reckon-web/badge';
  • Code
  • API

Alternatives

  • Tag — Use tags to label, categorise or classify items using keywords

Badge

Use badges to highlight an item's status for quick recognition. Badges should contain short easy-to-scan text. Use sentence case for the badge's label.

To do
Open in Playroom

Tone

Use the tone property to indicate the intent of the badge.

Draft
In progress
Pending
Rejected
Resolved
Attention

Weight

Use "subtle" weight badges by default, and in instances where they may dominate the screen, such as tables. Reserve "bold" badges for occasions where you must grab the user's attention.

Draft
In progress
Pending
Rejected
Resolved
Attention

NotificationBadge

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

123

Tone

Use the tone property to indicate the intent behind a given value.

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+

IndicatorDot

A small decorative indicator used to call attention to an item.

Label

When the intent isn't provided by text, you must supply an "aria-label" for assistive tech users.

Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo