# Badge

Source: https://design.ritchiebros.com/components/data-display/badge/

Badges inform people of the status or tone of an object, or of an action that has been taken.

## Figma

The Figma reference for **Badge** will appear here once the design link is added.

## Storybook

Interactive examples for **Badge** will render here once the Storybook link is wired in.

## Best practices

- Use established color/tone patterns so people can quickly identify status or importance.
- Label badges with short, scannable text.
- Position each badge so it clearly identifies the object it’s labeling.
- Describe status in the past tense — for example, “Refunded”, not “Refund”.

## Do’s and don’ts

**Do:** Reuse an existing badge tone that communicates the state you need.

**Don’t:** Invent a new badge tone when an existing one already communicates it.

**Do:** Use a single word, or two words for a complex state: “Sold”, “Reserve not met”.

**Don’t:** Write long phrases or sentences inside a badge.

## Related components

- [Chip](https://design.ritchiebros.com/components/data-display/chip/)
- [Avatar](https://design.ritchiebros.com/components/data-display/avatar/)