Badge

Features

• Supports various statuses
• Can optionally display an icon next to the label

When to use

To highlight an item's category or attribute, use a Tag instead.

Examples

Variants

The component comes in different variants. Each variant is used to signal a different status.

<Stack space={16}>
    <Badge variant="info">Info</Badge>
    <Badge variant="neutral">Neutral</Badge>
    <Badge variant="positive">Positive</Badge>
    <Badge variant="negative">Negative</Badge>
    <Badge variant="warning">Warning</Badge>
    <Badge variant="discover">Discover</Badge>
</Stack>

Info

Use the info variant to highlight something that's neither good or bad. This is similar to the neutral variant. However, it should be used for active statuses (e.g., in progress, processing, etc.).

<Badge variant="info">In progress</Badge>

Neutral

Use the neutral variant to highlight something that's neither good or bad. This is similar to the info variant. However, it should be used for inactive statuses (e.g., archived, paused, draft, etc.).

<Badge variant="neutral">Off</Badge>

Positive

Use the positive variant to highlight something that's good, from the user's perspective, or something enabled (e.g., approved, active, on, enabled, etc.).

<Badge variant="positive">Approved</Badge>

Negative

Use the negative variant to highlight something that's bad, from the user's perspective.

<Badge variant="negative">Rejected</Badge>

Warning

Use the warning variant to highlight something that requires the user's attention.

<Badge variant="warning">Overdue</Badge>

Discover

Use the discover variant to highlight new features or functionality users might not be aware of.

<Badge variant="discover">New</Badge>

Icons

An icon can be added next to the label. This can help users understand a badge's meaning. Icons can also make badges more recognisable and distinguishable. This is helpful in scenarios where multiple badges are used on a page or within a list.

<Stack space={16}>
    <Badge variant="info" Icon={Info}>
        Info
    </Badge>
    <Badge variant="neutral" Icon={Info}>
        Neutral
    </Badge>
    <Badge variant="positive" Icon={CircleCheck}>
        Positive
    </Badge>
    <Badge variant="negative" Icon={Negative}>
        Negative
    </Badge>
    <Badge variant="warning" Icon={Warning}>
        Warning
    </Badge>
    <Badge variant="discover" Icon={Rocket}>
        Discover
    </Badge>
</Stack>

Skeleton

Use a "skeleton" version of this component to display a loading state while data is being fetched. It provides a visual placeholder, giving users a preview of the UI structure before the actual content is loaded. This enhances the user experience by offering a more accurate representation of the final layout during data retrieval.

<Badge variant="discover" skeleton>
    Discover
</Badge>

Best practices

Accessibility

To satisfy WCAG 1.4.1 ("Color is not used as the only visual means of conveying information"), Badges have visually hidden prefixes applied before the content. These can be overridden using visuallyHiddenPrefix.

Migration

The loud prop has been removed. Remove it from Badge, Accordion.Header's badgeProps, and any badge wrappers. All badges now use the standard background for their status variant.

Related components

• Callout: Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section.
• Count: A static label that indicates the quantity of items.
• Tag: A static label that highlights an item's category or attribute.