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.

Variants​

Badges can be displayed as rectangular (default) or pill style. The Rectangular style is best when placing words within a Badge. The Pill style is best used when Badges contain numbers or symbols, or need to take on a pill style shape when containing words to visually separate from Buttons.