@nimbus-ds/badge

The badge component is used to communicate quantities of items or pending actions.

Installation

$ yarn add @nimbus-ds/badge
# or
$ npm install @nimbus-ds/badge

Component Anatomy

The component is composed of stylized text that consumes our tokens, in addition to a background that can vary in color as needed.

Guidelines

The Badge component should only be used to inform quantities of items, using numbers and numeric signs.

In addition, it has 5 variants that must be used taking into account the amount of items and the necessary visual highlight.

Neutral

This variant is used when we have a neutral context, related to the number informed by the Badge, but the visual highlight is not essential.

Primary

This variant is used when we have a neutral context, related to the number informed by the Badge, but the visual highlight is essential.

Success

This variant is used when we have a positive context, related to the number informed by the Badge.

Warning

This variant is used when we have an intermediary context, related to the number informed by the Badge.

Danger

This variant is used when we have a negative context, related to the number informed by the Badge.

Usage recommendations

We use the Badge component to help the user identify pending or actionable items more quickly, and categorize them by color means to employ the proper visual highlighting.

Related components

Component Tag - Used to categorize information, organize or indicate status of elements or components using keywords, icons or colors. Chip Component - Used to categorize data within a filter or search result.

Usage

View docs here.