badge
Small status indicators and labels that display concise information such as counts, categories, or brief descriptive text adjacent to other UI elements.
On this page
This documentation is a work in progress and may contain incomplete or outdated
information. If you have any feedback or suggestions, please open an issue on GitHub.
Technical specifications and design system values that define the visual and structural properties of badge components. These specifications ensure consistent implementation across design tools and development environments.
Legend:
- Brackets (
[]) denote a component variant placeholder. - Full emphasis indicates a value specific to that variant.
- Dimmed indicates a value unchanged from the default variant.
Badges
Specifications for badge elements including measurements, colors, typography, and styling attributes. These values define the core appearance and informational display properties for each badge variant.
1
Badge
- style:
- solid
- minWidth:
- size.badge.[size]-main
- minHeight:
- size.badge.[size]-main
- verticalPadding:
- space.badge.[size]-padding-y
- horizontalPadding:
- space.badge.[size]-padding-x
- gap:
- space.badge.[size]-gap
- fill:
- color.context.[context].bg-solid
- borderColor:
- color.context.[context].bg-transparent
- borderRadius:
- borderRadius.badge.[size]
- borderWidth:
- borderWidth.badge.main
- style:
- smooth
- minWidth:
- size.badge.[size]-main
- minHeight:
- size.badge.[size]-main
- verticalPadding:
- space.badge.[size]-padding-y
- horizontalPadding:
- space.badge.[size]-padding-x
- gap:
- space.badge.[size]-gap
- fill:
- color.context.[context].bg-even
- borderColor:
- color.context.[context].bg-transparent
- borderRadius:
- borderRadius.badge.[size]
- borderWidth:
- borderWidth.badge.main
- style:
- outline
- minWidth:
- size.badge.[size]-main
- minHeight:
- size.badge.[size]-main
- verticalPadding:
- space.badge.[size]-padding-y
- horizontalPadding:
- space.badge.[size]-padding-x
- gap:
- space.badge.[size]-gap
- fill:
- color.context.[context].bg-transparent
- borderColor:
- color.context.[context].base-color
- borderRadius:
- borderRadius.badge.[size]
- borderWidth:
- borderWidth.context.large
2
Icon
- style:
- solid
- height:
- size.badge.[size]-icon
- width:
- size.badge.[size]-icon
- fill:
- color.context.[context].fg-solid
- style:
- smooth
- height:
- size.badge.[size]-icon
- width:
- size.badge.[size]-icon
- fill:
- color.context.[context].fg-main
- style:
- outline
- height:
- size.badge.[size]-icon
- width:
- size.badge.[size]-icon
- fill:
- color.context.[context].base-color
3
Label Frame
Badge label required additional spacing to accommodate the presence of an icon and maintain visual balance.
- horizontalPadding:
- space.badge.[size]-nudge
4
Label Text
- style:
- solid
- fill:
- color.context.[context].fg-solid
- typography:
- font.badge.[size]
- style:
- smooth
- fill:
- color.context.[context].fg-main
- typography:
- font.badge.[size]
- style:
- outline
- fill:
- color.context.[context].base-color
- typography:
- font.badge.[size]