Badge - Usage

Badges label a small piece of metadata—such as a status, category, price, or sponsorship—so people can scan nearby content quickly.

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

Guidelines

Use a badge only when its label supports nearby content.
Give the same label and variant the same meaning throughout your product.
Make the text carry the meaning. Colour and icons should reinforce the label, not replace it.

When to use

To show a status, category, count, role, or other compact metadata.
To identify price or sponsored content on a card or image.
To highlight a small but important update in a list, card, or dashboard.

When not to use

For critical feedback or a message that needs a response. Use an Alert.
For descriptions, instructions, or other long-form content. Use regular page content or a Box.

Behaviour

A listing card uses an Available badge for status and a blue View listing button for the action. — Use a badge for metadata and a Button or Link for the action.
**Why**: Interactive controls provide the expected focus, hover, pressed, and assistive-technology behaviour.

A listing card incorrectly presents View listing as a pale blue badge. — Use a badge as the action itself.
**Why**: Badges provide no interaction states or control semantics, so people can miss the action.

Placement

Badges can stand alone or sit inside a parent container such as a card. When you place a badge in a corner, set the appropriate position so its border radius aligns with the container.