Skip to main content

Badge

Component
Live

The Badge component highlights an item’s status or category.

FigmaCode

Usage​

A Badge uses a coloured background to support the message conveyed by it’s label, for example error, warning, information etc. Labels should be short and concise.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Badge } from "@iag/chroma-react-ui.components";

When to use​

Use Badges to display information related to a piece of content, such as a tag, status or category.

When to avoid​

Avoid using Badges for delivering extensive messages to users. In this case, consider the Alert component instead.

Do

  • Do keep labels short and concise.
  • Do use the appropriate colour to convey or support the label text.
  • Do use the best visual styling (default or rounded) to suit the content and context.
  • Do use the role='status' prop in a Badge where the screenreader needs to prioritise announcing its contents. However, be cautious about setting this on multiple Badges on a page, as this may not create the required result and confuse users.

Don't

  • Don’t use long text labels or sentences.

Rounded Variants​

Badges come in two styles: rectangular (default) and rounded. The rectangular shape is ideal for displaying words. The rounded style works best when displaying numbers, symbols, or where a pill-shaped appearance is required. Rounded is also useful when badges with words need a visual separation from buttons or other UI elements.

Inverse Variants​

Inverse badges are specifically designed to ensure accessibility when placed on their corresponding background colour. For instance, using a PrimaryInverse badge on a Primary background guarantees that the badge maintains the necessary contrast ratio for accessibility. If the Primary colour changes, the inverse badge will automatically adjust to preserve optimal visibility and contrast with the background, ensuring continuous accessibility.