role presentation
Badge draft v0.1.0
A short piece of text that qualifies the item next to it: a status, a count, a category.
A badge is a small, read-only label attached to something else: the status of an order (Shipped), the number of unread messages, a category tag. It is text with a tinted or filled background; its intent gives the tint a meaning (success, warning, error, info), its emphasis how loud it is. A badge is never interactive: a removable tag or a filter is a different component.
Tokens
From packages/tokens/src/components/badge.tokens.json. Path grammar: badge.<part>.<property>[.<option>][.<state>]. Every value aliases a semantic token.
No token matches.
Part container (30)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
badge.container.background.accent.neutral
|
color |
{global.bg.accent.neutral.default}
|
light
#201E1F
dark
#E8E3E4
|
--badge-container-background-accent-neutral
|
badge.container.background.accent.brand
|
color |
{global.bg.accent.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--badge-container-background-accent-brand
|
badge.container.background.accent.success
|
color |
{global.bg.accent.functional.success.default}
|
light
#0B7742
dark
#11C772
|
--badge-container-background-accent-success
|
badge.container.background.accent.warning
|
color |
{global.bg.accent.functional.warning.default}
|
#FFC61C
|
--badge-container-background-accent-warning
|
badge.container.background.accent.error
|
color |
{global.bg.accent.functional.error.default}
|
#E12A23
|
--badge-container-background-accent-error
|
badge.container.background.accent.info
|
color |
{global.bg.accent.functional.info.default}
|
light
#2B68E0
dark
#94B6F4
|
--badge-container-background-accent-info
|
badge.container.background.subtle.neutral
|
color |
{global.bg.subtle.neutral.default}
|
light
#B6B4B41a
dark
#7676761a
|
--badge-container-background-subtle-neutral
|
badge.container.background.subtle.brand
|
color |
{global.bg.subtle.brand.default}
|
light
#EEF1F7
dark
#09191D
|
--badge-container-background-subtle-brand
|
badge.container.background.subtle.success
|
color |
{global.bg.subtle.functional.success.default}
|
light
#DBFAE6
dark
#011C16
|
--badge-container-background-subtle-success
|
badge.container.background.subtle.warning
|
color |
{global.bg.subtle.functional.warning.default}
|
light
#FFF1C7
dark
#1F1504
|
--badge-container-background-subtle-warning
|
badge.container.background.subtle.error
|
color |
{global.bg.subtle.functional.error.default}
|
light
#FEECEA
dark
#2B0B08
|
--badge-container-background-subtle-error
|
badge.container.background.subtle.info
|
color |
{global.bg.subtle.functional.info.default}
|
light
#EDF1F9
dark
#09162F
|
--badge-container-background-subtle-info
|
badge.container.border-color.accent.neutral
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--badge-container-border-color-accent-neutral
|
badge.container.border-color.accent.brand
|
color |
{global.border.accent.brand.default}
|
light
#1148A9
dark
#53D6F2
|
--badge-container-border-color-accent-brand
|
badge.container.border-color.accent.success
|
color |
{global.border.accent.functional.success.default}
|
light
#075D33
dark
#16AE64
|
--badge-container-border-color-accent-success
|
badge.container.border-color.accent.warning
|
color |
{global.border.accent.functional.warning.default}
|
#DFA700
|
--badge-container-border-color-accent-warning
|
badge.container.border-color.accent.error
|
color |
{global.border.accent.functional.error.default}
|
#C01619
|
--badge-container-border-color-accent-error
|
badge.container.border-color.accent.info
|
color |
{global.border.accent.functional.info.default}
|
light
#1A4CAD
dark
#709DF1
|
--badge-container-border-color-accent-info
|
badge.container.border-color.subtle.neutral
|
color |
{global.border.subtle.neutral.default}
|
light
#DFDBDC
dark
#36363680
|
--badge-container-border-color-subtle-neutral
|
badge.container.border-color.subtle.brand
|
color |
{global.border.subtle.brand.default}
|
light
#DDE6F5
dark
#0D272E
|
--badge-container-border-color-subtle-brand
|
badge.container.border-color.subtle.success
|
color |
{global.border.subtle.functional.success.default}
|
light
#AEF6C9
dark
#022A23
|
--badge-container-border-color-subtle-success
|
badge.container.border-color.subtle.warning
|
color |
{global.border.subtle.functional.warning.default}
|
light
#FFE495
dark
#2D2107
|
--badge-container-border-color-subtle-warning
|
badge.container.border-color.subtle.error
|
color |
{global.border.subtle.functional.error.default}
|
light
#FCCDC6
dark
#3E130F
|
--badge-container-border-color-subtle-error
|
badge.container.border-color.subtle.info
|
color |
{global.border.subtle.functional.info.default}
|
light
#DEE7F6
dark
#0B204B
|
--badge-container-border-color-subtle-info
|
badge.container.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--badge-container-border-width
|
badge.container.border-radius
|
dimension |
{corner-radius.full}
|
9999px
|
--badge-container-border-radius
|
badge.container.min-height.small
|
dimension |
{space.20}
|
20px
|
--badge-container-min-height-small
|
badge.container.min-height.medium
|
dimension |
{space.24}
|
24px
|
--badge-container-min-height-medium
|
badge.container.padding-inline.small
|
dimension |
{space.6}
|
6px
|
--badge-container-padding-inline-small
|
badge.container.padding-inline.medium
|
dimension |
{space.8}
|
8px
|
--badge-container-padding-inline-medium
|
Part label (14)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
badge.label.color.accent.neutral
|
color |
{global.text.on-accent.neutral.primary}
|
light
#FDFDFD
dark
#191919
|
--badge-label-color-accent-neutral
|
badge.label.color.accent.brand
|
color |
{global.text.on-accent.brand.default}
|
light
#FBFCFD
dark
#09191D
|
--badge-label-color-accent-brand
|
badge.label.color.accent.success
|
color |
{global.text.on-accent.functional.success.default}
|
light
#F8FEFA
dark
#011C16
|
--badge-label-color-accent-success
|
badge.label.color.accent.warning
|
color |
{global.text.on-accent.functional.warning.default}
|
#1F1504
|
--badge-label-color-accent-warning
|
badge.label.color.accent.error
|
color |
{global.text.on-accent.functional.error.default}
|
#FEFBFA
|
--badge-label-color-accent-error
|
badge.label.color.accent.info
|
color |
{global.text.on-accent.functional.info.default}
|
light
#FBFCFD
dark
#09162F
|
--badge-label-color-accent-info
|
badge.label.color.subtle.neutral
|
color |
{global.text.on-subtle.neutral.default}
|
light
#323031
dark
#E3DDDE
|
--badge-label-color-subtle-neutral
|
badge.label.color.subtle.brand
|
color |
{global.text.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--badge-label-color-subtle-brand
|
badge.label.color.subtle.success
|
color |
{global.text.on-subtle.functional.success.default}
|
light
#075D33
dark
#30F498
|
--badge-label-color-subtle-success
|
badge.label.color.subtle.warning
|
color |
{global.text.on-subtle.functional.warning.default}
|
light
#644B16
dark
#FFD654
|
--badge-label-color-subtle-warning
|
badge.label.color.subtle.error
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--badge-label-color-subtle-error
|
badge.label.color.subtle.info
|
color |
{global.text.on-subtle.functional.info.default}
|
light
#1A4CAD
dark
#BBCFF3
|
--badge-label-color-subtle-info
|
badge.label.typography.small
|
typography |
{body.family}{body.size.xs}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":12,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--badge-label-typography-small-font-family--badge-label-typography-small-font-size--badge-label-typography-small-font-weight--badge-label-typography-small-line-height--badge-label-typography-small-letter-spacing
|
badge.label.typography.medium
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--badge-label-typography-medium-font-family--badge-label-typography-medium-font-size--badge-label-typography-medium-font-weight--badge-label-typography-medium-line-height--badge-label-typography-medium-letter-spacing
|