Skip to main content

Badge

The badge represents a visually-styled label which holds a small amount of information. This information could be text based or number based, if used for notifications.

Installation​

Install

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

Import

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

Accessibility​

Accessibility Documentation(opens in new window)

Default​

Inverse​

Primary​

Secondary​

Accent​

Information​

Success​

Warning​

Error​

Announced Badge​

Adding the role="status" prop to the Badge will mean that a screenreader will prioritise announcing the content of the Badge(s) to the user. Be aware that setting this on multiple Badges on a page may not create the required result and confuse users.

Rounded​

Primarily used for numbered badges

Example with icon​

Properties​

Name
Description
  • children*
    ReactNodeContent to be displayed inside the Badge
  • className
    stringAdditional CSS classes to be applied
  • rounded
    booleanWhether the badge should have rounded corners
  • variant
    "light" | "lighter" | "inverse" | "primary" | "primaryLight" | "primaryLighter" | "secondary" | "secondaryLight" | "secondaryLighter" | "accent" | "accentLight" | "accentLighter" | ... 11 more ... | "errorLighter"The visual variant of the badge. Choose from the available badge types
  • role
    stringARIA role for accessibility purposes

CSS Variables​