Badge

A label that emphasizes an element that requires attention, or helps categorize with other similar elements.

Documented

The component is fully documented

Figma component

Includes a link to a Figma component that has been imported to Supernova

Open in Figma

Status

The component has a health status indicated

Healthy

Overview

Badges are used everywhere throughout the SOROS app to indicate states and categorize elements. Badges can be intractable or static.

Usage

Utilize badges to highlight essential information such as notifications, alerts, or updates, ensuring they draw appropriate attention.

Do not overuse badges, as this can lead to visual clutter and diminish the impact of truly important statuses.

Select badge colors that align with the intended message and overall design scheme, ensuring consistency and clarity (e.g., red for errors, green for success).

Variants

The badge component consists of multiple colors representing different states. You should use the color that makes the most sense for the corresponding action. The badge component can also include an optional avatar component or icon.