Components

StatusBadge

Shows a status from the shared status vocabulary, with a tone, an icon and text.

Storybook: Storybook
Source: Source

States

State	Support	Visual change	Tokens
Default (`subtle`)	Yes	Light background, border and text by status	`color-status--background`, `color-status--border`, `color-status-*-foreground`
Emphasised (`bold`)	Yes	Filled background, transparent border, text on the fill	`color-status--emphasis`, `color-status--on-emphasis`
Hover, pressed, focus	No	The badge is not interactive	-
Disabled	No	There is no disabled state	-
Unknown code	Yes	Neutral tone, no icon, the raw code	`color-status-neutral-*`

Vocabulary

Status	Tone	Icon	Text (TR / EN)
`draft`	neutral	`pencil`	Taslak / Draft
`pending`	warning	`clock`	Beklemede / Pending
`in-review`	info	`eye`	İnceleniyor / In review
`active`	brand	`circle-check`	Etkin / Active
`approved`	success	`check`	Onaylandı / Approved
`completed`	success	`circle-check`	Tamamlandı / Completed
`paused`	neutral	`minus`	Duraklatıldı / Paused
`cancelled`	neutral	`circle-x`	İptal edildi / Cancelled
`rejected`	danger	`x`	Reddedildi / Rejected
`failed`	danger	`circle-alert`	Başarısız / Failed
`expired`	warning	`calendar`	Süresi doldu / Expired
`archived`	neutral	`file`	Arşivlendi / Archived

Measurements

Property	Value	Token
Height, `sm`	16 px	`badge-height-sm`
Height, `md`	20 px	`badge-height-md`
Inline padding, `sm`	6 px	`badge-padding-inline-sm`
Inline padding, `md`	8 px	`badge-padding-inline-md`
Corner radius	Fully rounded	`badge-radius`
Icon	12 px	`badge-icon-size`
Icon to text	4 px	`space-xs`
Text style	12 px, semibold	`label-sm`

Tokens

Values follow the selected brand; switch the brand in the top bar.

Token	Sample	Light mode	Dark mode
`--bigbang-badge-height-sm`		`16px16px16px`	`16px16px16px`
`--bigbang-badge-height-md`		`20px20px20px`	`20px20px20px`
`--bigbang-badge-padding-inline-sm`		`6px6px6px`	`6px6px6px`
`--bigbang-badge-padding-inline-md`		`8px8px8px`	`8px8px8px`
`--bigbang-badge-radius`		`9999px9999px9999px`	`9999px9999px9999px`
`--bigbang-badge-icon-size`		`12px12px12px`	`12px12px12px`
`--bigbang-color-status-success-background`		`#def6e5#def6e5#def6e5`	`#103620#103620#103620`
`--bigbang-color-status-success-foreground`		`#0d5c34#0d5c34#0d5c34`	`#c3eed1#c3eed1#c3eed1`
`--bigbang-color-status-warning-background`		`#ffebd5#ffebd5#ffebd5`	`#422702#422702#422702`
`--bigbang-color-status-warning-foreground`		`#6c4300#6c4300#6c4300`	`#fddbb4#fddbb4#fddbb4`
`--bigbang-color-status-danger-emphasis`		`#e1595b#e1595b#e1595b`	`#ff9a97#ff9a97#ff9a97`
`--bigbang-color-status-danger-on-emphasis`		`#331212#331212#331212`	`#331212#331212#331212`

Motion and interaction

Interaction	Motion	Reduced motion
First render	Opacity 0 → 1, `motion-skeleton-reveal-duration` (`motion.reveal`)	Very short fade
Status change	The badge is remounted with `key={status}`; the new status appears with the same fade	Very short fade
Hover, press, focus	None; the badge is not interactive	-

Values come from tokens; see Motion for details.