# Badge

A compact visual indicator for status, counts and notifications.


## Overview

### Usage

Badges are especially useful for:

*   **Status indicators** – Showing that something is new, in progress, needs attention, or has been successfully completed.
    
*   **Counters** – Indicating the number of new messages, notifications, or tasks.
    
*   **Contextual highlights** – Marking a feature as beta or signaling updates users should be aware of.
    

Use badges sparingly – too many can create visual noise and reduce their impact. Always ensure that the badge color, icon and label clearly support the intended message.

### Variants

A set of predefined styles that convey different meanings and states through consistent visual treatment.

*   **Information** – For general updates or tips that help the user understand context.
    
*   **Notice** – For neutral alerts or flags that are not critical but still relevant.
    
*   **Positive** – For confirming success or a completed action (e.g., “Active” or “Paid”).
    
*   **Warning** – For potential issues users should be cautious about.
    
*   **Negative** – For errors, failed states, or items requiring immediate attention.

### Size

Available in large (default) and small sizes to accommodate different UI contexts and content requirements.

### Notification mode

Optimised for notification indicators.

### Rounded

The rounded property transforms the badge's appearance by applying fully circular corners, making it ideal for numerical indicators or status markers.

### Lead and trail slots

The badge component supports both lead and trail slots, enabling the placement of icons or additional content before or after the main text.


## UX Guidelines

### Writing UX text for badges

### Our most common statuses