DocsComponents

Badge

Status and labels, never interactive.

PublishedDraftFully booked17:30

Variants

Four variants, one shape. Each variant has a meaning, so the same status always looks the same across the product.

Published

secondary · Active status, e.g. a published offer. The default.

Draft

outline · Neutral status: draft, archived, coming soon.

Fully booked

inverted · Dark, highlighted status, e.g. a full class.

17:30

default · Dark with white text: the time on the activity card.

PublishedDraftFully booked17:30

Badges sit on cards (white) as often as on the lilac page.

A badge has no interactive states: it is a label, not a control. What changes is the content and the variant, chosen by the status it shows.

Published Paused Draft Coming soon

Offer status in the organiser panel: published, paused, draft

A plain span with a data-variant attribute; the text comes from the app’s translations.

Prop	Type	Default	Description
`variant`	`"secondary" \| "outline" \| "inverted" \| "default"`	`"secondary"`	Colour set; shape and size are the same in every variant.
`children`	`text, optional 12 px icon`	–	Content of the badge; the icon comes from the app.
`className`	`string`	–	Extra classes, e.g. position on a card.

A span without a role: screen readers read the text in place, as part of the card or row.
Not focusable and not clickable. The design-system audit leaves badges out of the rule that every control needs a visible border, because they are not controls.
The status lives in the text, not only in the colour.
Contrast: secondary 16.3:1, outline 18.3:1 on the page background, inverted 14.2:1, default 20.2:1.

Swimming for beginnersPublished

DoUse a badge to show a status next to the thing it describes.

Sport ✕ Art ✕

Don’tDon’t make a badge clickable. A choice the user can toggle is a chip, with a border, hover and focus.