Feedback

Badge

View in Figma

Compact status or category pill. Two axes: variant sets the emphasis (primary is a subtle tinted fill, secondary and tertiary are transparent), and intent sets the semantic color family. Every intent uses colored text.

Overview

Compact status or category pill. Two axes: variant sets the emphasis (primary is a subtle tinted fill, secondary and tertiary are transparent), and intent sets the semantic color family. Every intent uses colored text.

Label Text
Variant
Primary

The primary variant.

Variants and states

brandneutralinfosuccesswarningerror
primary
Label Text
Label Text
Label Text
Label Text
Label Text
Label Text
secondary
Label Text
Label Text
Label Text
Label Text
Label Text
Label Text
tertiary
Label Text
Label Text
Label Text
Label Text
Label Text
Label Text

Anatomy

Badge
SupportLabel Text
  1. 1IconLeading  optional  instance swap
  2. 2IndicatorLeading  optional  instance swap
  3. 3Container.Content
  4. 4Label.Support  optional
  5. 5Label.Text  required

Measurements

SupportLabel Text
Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Other
Corner radius
radiusSm
8pt
Horizontal padding
spacingPaddingMd
8pt
Label inset
spacingGapPositive2xs
2pt
Label typography
label.md.medium
Size 12px · typographyFontSizeLabelMdLine height 16px · typographyLineHeightLabelMdWeight 500 · typographyFontWeightMediumTracking 0px · typographyTrackingLabelMdParagraph spacing 0px · typographyParagraphSpacingLabelMdFamily SF Pro Text · typographyFontFamilyText
Container
Brand fill (primary)
colorBackgroundAccentPrimary
#4B56C7
Brand fill (secondary)
colorBackgroundAccentPrimarySubtle
#4B56C71F · 12%
Info/status fill (primary) — same shape for neutral/success/warning/error
colorBackgroundStatusInfoPrimary
#56B5E3
Info/status fill (secondary) — same shape for neutral/success/warning/error
colorBackgroundStatusInfoSecondary
#56B5E314 · 8%
Fill (tertiary) — no container background for any intent
literal value
transparent
Label
Brand text (all variants). Note: equals the primary fill — low contrast, mirrored from Figma as-is
colorContentAccent
#4B56C7
Neutral text (primary + secondary)
colorContentPrimary
#0C1828
Neutral text (tertiary)
colorContentSecondary
#6D747E
Info/status text (all variants) — same shape for success/warning/error
colorContentStatusInfo
#1E74A9

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues
variantvariantprimary, secondary, tertiary
intentvariantbrand, neutral, info, success, warning, error
hasIconLeadingbooleanFalse
hasIndicatorLeadingbooleanFalse
labelTexttextLabel Text
hasLabelSupportbooleanFalse
labelSupporttextSupport

Accessibility

A badge conveys status or a category, so never rely on its color alone. Pair the color with the label text so the meaning survives for color-blind and low-vision users. Purely decorative badges should be hidden from assistive technology.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.