Badge

A badge is a small indicator that communicates a status, typically containing a number, related to a child UI element.

Overview / Hero - KL

Anatomy

A badge consists of a small circle, typically containing a number, that appears in proximity to another UI element. It does not contain any other (optional) elements.

Overview / Anatomy - KL

Types

The Primary Badge is the default indicator for general statuses. For urgent or critical situations requiring immediate attention, the Warn Badge can be used. This should be applied sparingly to avoid overuse and maintain its impact.

Storybook failed to load. Please connect to the VPN to access.

Primary Badge

Storybook failed to load. Please connect to the VPN to access.

Warn Badge