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
} from '@reckon-web/badge';
  • Code
  • API

Usage

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

Status

The specific meaning behind each status may very between apps, but they should generally have similar intent.

Draft
In progress
Pending
Rejected
Resolved
Attention

Appearance

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

Draft
In progress
Pending
Rejected
Resolved
Attention
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.