Badge - Usage

Badges are used to highlight a relevant piece of information, like status or category.

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

Guidelines

• Badges are used to display small but yet important pieces of information in list views, cards, or dashboards.
• They should contain clear, easy-to-understand, and descriptive text, paired with intentional colour choices that reinforce their meaning.
• Use badges in a consistent way across your product to help users become familiar with their meaning.
• Use badges consistently across your product to help users quickly recognise and understand their purpose.

When to use

• Use badges to highlight statuses, categories, or important updates.

When not to use

• Don't use badges for large amounts of text, such as long descriptions, or critical information that users must engage with directly.
• Avoid using multiple badges in one place, which can clutter the UI and overwhelm users.
• Don't use badges for actions. They should be non-interactive.

Behaviour

• Badges are non-interactive UI elements, meaning that no state changes are expected when users hover or tap/click on them.
• A badge's width automatically adjusts to fit its content, so it's important to keep the text concise. Overly long text can break the layout or require fallback behaviours such as truncation or text wrapping.

Placement

Badges can be used as standalone elements or placed within a parent container, such as a card. When placing a badge inside a container, make sure to set the appropriate position prop so that the badge renders with the correct border radius. This ensures the badge visually aligns with the container's corner radius and overall style.

Although possible, avoid placing more than one badge per container.

Content guidelines

• Use descriptive text (use adjectives and avoid verbs).
• Avoid using multiple words.

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system