Feedback

Badge.Notification

View in Figma

A compact circular or pill-shaped count indicator used to surface unread items or activity on a parent element. Two axes: size (sm at 16pt, lg at 24pt) and type (text shows a numeric label, icon shows a small glyph). The background is always the error-status primary color, and the content is always on-dark.

Overview

A compact circular or pill-shaped count indicator used to surface unread items or activity on a parent element. Two axes: size (sm at 16pt, lg at 24pt) and type (text shows a numeric label, icon shows a small glyph). The background is always the error-status primary color, and the content is always on-dark.

1
Variant
Text

The text variant.

Variants and states

smlg
text
1
1
icon

Anatomy

BadgeNotification
1
  1. 1Container  required
  2. 2Label.Number  optional
  3. 3Icon  optional  instance swap

Measurements

1
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 (all sizes)
radiusPill
Pill
Horizontal padding (all sizes)
spacingGapPositiveXs
4pt
Label.Number
Label typography (size=sm)
label.sm.semibold
Size 10px · typographyFontSizeLabelSmLine height 12px · typographyLineHeightLabelSmWeight 600 · typographyFontWeightSemiboldTracking 0px · typographyTrackingLabelSmParagraph spacing 0px · typographyParagraphSpacingLabelSmFamily SF Pro Text · typographyFontFamilyText
Label typography (size=lg)
label.md.semibold
Size 12px · typographyFontSizeLabelMdLine height 16px · typographyLineHeightLabelMdWeight 600 · typographyFontWeightSemiboldTracking 0px · typographyTrackingLabelMdParagraph spacing 0px · typographyParagraphSpacingLabelMdFamily SF Pro Text · typographyFontFamilyText
Label text and icon fill (all variants)
colorContentOnDark
#FFFFFF
Container
Container background (all variants)
colorBackgroundStatusErrorPrimary
#EB515E

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
sizevariantsm, lg
typevarianttext, icon
labelNumbertext1
iconSmallinstance_swapBell (sm)
iconLargeinstance_swapBell (lg)

Accessibility

Ensure a minimum 44 by 44pt tap target for any interactive instance, adding surrounding padding when the component itself is shorter. Keep text concise, and never rely on color alone to convey meaning; pair it with a label or an icon so the message survives for color-blind and low-vision users.

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