# Badge

A static label that highlights an item's status.

Tabs: [Guidelines](/components/web/badge/badge.guidelines.md) · [Code](/components/web/badge/badge.code.md)

## 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](/components/web/tag/tag.guidelines) instead.

## Examples

### Variants

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

```tsx
<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.).

```tsx
<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.).

```tsx
<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.).

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

#### Negative

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

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

#### Warning

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

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

#### Discover

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

```tsx
<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.

```tsx
<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.

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

## Best practices

**Do:** Use to highlight an item's status.

**Don't:** Use to highlight an item's category or attribute. Use a Tag instead.

**Do:** Use short, descriptive labels.

**Don't:** Use long labels.

**Do:** Make sure the label communicates the badge's meaning.

**Don't:** Rely on color alone to communicate meaning.

**Do:** Add an icon to support the badge's meaning.

**Don't:** Add an icon for purely aesthetic reasons.

## Accessibility

To satisfy [WCAG 1.4.1](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color) ("Color is not used as the only visual means of conveying information"), Badges have [visually hidden](/utils/visually-hidden/visually-hidden.guidelines) prefixes applied before the content. These can be overridden using `visuallyHiddenPrefix`.

| Variant      | Prefix       |
| ------------ | ------------ |
| **Info**     | Information: |
| **Neutral**  | Information: |
| **Positive** | Success:     |
| **Negative** | Error:       |
| **Warning**  | Warning:     |
| **Discover** | New:         |

## 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](/components/web/callout/callout.guidelines): Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section.
- [Count](/components/web/count/count.guidelines): A static label that indicates the quantity of items.
- [Tag](/components/web/tag/tag.guidelines): A static label that highlights an item's category or attribute.