Badge | Checkatrade Design System

Tones

Success

Positive, completed, or healthy states.

Active

<Badge label="Active" tone="success" />

Warning

Caution or attention-needed states.

Pending

<Badge label="Pending" tone="warning" />

Error

Problem or failure states.

Failed

<Badge label="Failed" tone="error" />

Information

Neutral, informational labels.

New

<Badge label="New" tone="information" />

Neutral

Grey, unopinionated labels with no positive/negative connotation.

Draft

<Badge label="Draft" tone="neutral" />

Ai

AI-generated or AI-assisted content. Renders a gradient background.

Suggested

<Badge label="Suggested" tone="ai" />

Notification

Attention-grabbing alerts.

New

<Badge label="New" tone="notification" />

Sizes

Small

12px text. Dense UI — table cells, inline lists.

Label

<Badge label="Label" tone="success" size="sm" />

Medium

14px text. The default size for most layouts.

Label

<Badge label="Label" tone="success" size="md" />

Large

14px text. Prominent labels, card headers.

Label

<Badge label="Label" tone="success" size="lg" />

Icons

Leading icon

Icon before the label. Fixed 16px, coloured to match the tone.

Verified

<Badge label="Verified" tone="success" leadingIcon={MaterialCheck} />

Trailing icon

Icon after the label.

New

<Badge label="New" tone="information" trailingIcon={MaterialCheck} />

When to use

Use a badge to label an item with a short, at-a-glance status — “Active”, “Pending”, “New”. Badges are non-interactive: they describe state, they don’t perform actions. For an actionable chip or filter, use a Button.

Always make the status clear from the label text. Tone colour reinforces meaning but must never be the only signal — users who can’t distinguish the colours rely on the words.

Tones

Success: positive, completed, or healthy states.
Warning: caution or attention-needed states.
Error: problem or failure states.
Information: neutral, informational labels.
Neutral: grey, unopinionated labels with no positive/negative connotation.
Ai: AI-generated or AI-assisted content. Renders a gradient background.
Notification: attention-grabbing alerts.

When not to use

Actions: use a Button — a badge is not clickable.
Counts/notifications: numeric notification badges are out of scope for this component.
Long text: badges are for short labels; don’t wrap paragraphs in one.

Props

Prop	Type	Default	Description
label *	string	-	Visible text content of the badge.
tone *	'success' \| 'warning' \| 'error' \| 'information' \| 'neutral' \| 'ai' \| 'notification'	-	Semantic tone. Required — a badge's colour carries meaning, so there is no default.
size	'sm' \| 'md' \| 'lg'	'md'	Controls text size and padding. Shape is always a full pill.
leadingIcon	ComponentType	-	Optional icon rendered before the label. Fixed 16px, decorative.
trailingIcon	ComponentType	-	Optional icon rendered after the label. Fixed 16px, decorative.
data-testid	string	-	Web — passed to the root span for test targeting.
testID	string	-	Native — passed to the root View for test targeting.

Import

Web

import { Badge } from '@checkatrade/components-web';

Native

import { Badge } from '@checkatrade/components-native';

Basic usage

<Badge label="Active" tone="success" />
<Badge label="Pending" tone="warning" size="sm" />
<Badge label="Failed" tone="error" />
<Badge label="New" tone="information" size="lg" />
<Badge label="Draft" tone="neutral" />
<Badge label="Suggested" tone="ai" />
<Badge label="New" tone="notification" />
<Badge label="Verified" tone="success" leadingIcon={MaterialCheck} />
<Badge label="New" tone="information" trailingIcon={MaterialCheck} />

Platform status

Platform / Area	Status
Design (Figma)	Beta
Web (React)	Beta
Native (React Native)	Beta
iOS (Swift)	Planned
Android (Kotlin)	Planned
Accessibility audit	Planned

Accessibility

The badge is non-interactive: a <span> on web, a View + Text on native (a LinearGradient + Text for the ai tone). It is not focusable and has no role.
The label is plain visible text, announced inline by assistive technology.
Tone is conveyed by colour and text — never rely on colour alone to communicate status.

No releases yet.