Badge
Badge
displays small text labels with colored backgrounds, commonly used for status indicators, categories, tags, and counts. It supports dynamic color mapping based on content values, useful for status systems and data categorization.Key features:
- Dynamic color mapping: Automatically applies colors based on the badge value (e.g., status states)
- Two shape variants: Choose between
badge
(rounded corners) orpill
(fully rounded) - Flexible color control: Set just background color or customize both background and text colors
Properties
colorMap
The
Badge
component supports the mapping of a list of colors using the value
prop as the key. If this property is not set, no color mapping is used.Provide the component with a list or key-value pairs in two ways:
- Only change the background color
Example: only background color
- Change the background and label color
<App
var.simpleColorMap="{{
important: { label: 'red', background: 'pink' },
unimportant: { label: 'black', background: 'gray' }
}}">
<Badge value="important" colorMap="{simpleColorMap}" />
<Badge value="unimportant" colorMap="{simpleColorMap}" />
<Badge value="other" colorMap="{simpleColorMap}" />
</App>
Example: background and label color
<App
var.simpleColorMap="{{
important: { label: 'red', background: 'pink' },
unimportant: { label: 'black', background: 'gray' }
}}">
<Badge value="important" colorMap="{simpleColorMap}" />
<Badge value="unimportant" colorMap="{simpleColorMap}" />
<Badge value="other" colorMap="{simpleColorMap}" />
</App>
value
(required)
The text that the component displays. If this is not defined, the component renders its children as the content of the badge. If neither text nor any child is defined, the component renders a single frame for the badge with a non-breakable space.
Example: value
variant
(default: "badge")
Modifies the shape of the component. Comes in the regular
badge
variant or the pill
variant with fully rounded corners.Available values:
badge
(default), pill
<App>
<Badge value="Example badge" variant="badge" />
<Badge value="Example pill" variant="pill" />
</App>
Example: variant
<App>
<Badge value="Example badge" variant="badge" />
<Badge value="Example pill" variant="pill" />
</App>
Events
This component does not have any events.
Exposed Methods
This component does not expose any methods.
Styling
Theme Variables
Variable | Default Value (Light) | Default Value (Dark) |
---|---|---|
backgroundColor-Badge | rgb(from $color-secondary-500 r g b / 0.6) | rgb(from $color-secondary-500 r g b / 0.6) |
backgroundColor-Badge-pill | none | none |
border-Badge | 0px solid $borderColor | 0px solid $borderColor |
border-Badge-pill | none | none |
borderBottom-Badge | none | none |
borderBottom-Badge-pill | none | none |
borderBottomColor-Badge | none | none |
borderBottomColor-Badge-pill | none | none |
borderBottomStyle-Badge | none | none |
borderBottomStyle-Badge-pill | none | none |
borderBottomWidth-Badge | none | none |
borderBottomWidth-Badge-pill | none | none |
borderColor-Badge | none | none |
borderColor-Badge-pill | none | none |
borderEndEndRadius-Badge | none | none |
borderEndEndRadius-Badge-pill | none | none |
borderEndStartRadius-Badge | none | none |
borderEndStartRadius-Badge-pill | none | none |
borderHorizontal-Badge | none | none |
borderHorizontal-Badge-pill | none | none |
borderHorizontalColor-Badge | none | none |
borderHorizontalColor-Badge-pill | none | none |
borderHorizontalStyle-Badge | none | none |
borderHorizontalStyle-Badge-pill | none | none |
borderHorizontalWidth-Badge | none | none |
borderHorizontalWidth-Badge-pill | none | none |
borderLeft-Badge | none | none |
borderLeft-Badge-pill | none | none |
color-Badge | none | none |
color-Badge-pill | none | none |
borderLeftStyle-Badge | none | none |
borderLeftStyle-Badge-pill | none | none |
borderLeftWidth-Badge | none | none |
borderLeftWidth-Badge-pill | none | none |
borderRadius-Badge | 4px | 4px |
borderRight-Badge | none | none |
borderRight-Badge-pill | none | none |
color-Badge | none | none |
color-Badge-pill | none | none |
borderRightStyle-Badge | none | none |
borderRightStyle-Badge-pill | none | none |
borderRightWidth-Badge | none | none |
borderRightWidth-Badge-pill | none | none |
borderStartEndRadius-Badge | none | none |
borderStartEndRadius-Badge-pill | none | none |
borderStartStartRadius-Badge | none | none |
borderStartStartRadius-Badge-pill | none | none |
borderStyle-Badge | none | none |
borderStyle-Badge-pill | none | none |
borderTop-Badge | none | none |
borderTop-Badge-pill | none | none |
borderTopColor-Badge | none | none |
borderTopColor-Badge-pill | none | none |
borderTopStyle-Badge | none | none |
borderTopStyle-Badge-pill | none | none |
borderTopWidth-Badge | none | none |
borderTopWidth-Badge-pill | none | none |
borderHorizontal-Badge | none | none |
borderHorizontal-Badge-pill | none | none |
borderVerticalColor-Badge | none | none |
borderVerticalColor-Badge-pill | none | none |
borderVerticalStyle-Badge | none | none |
borderVerticalStyle-Badge-pill | none | none |
borderVerticalWidth-Badge | none | none |
borderVerticalWidth-Badge-pill | none | none |
borderWidth-Badge | none | none |
borderWidth-Badge-pill | none | none |
direction-Badge | none | none |
direction-Badge-pill | none | none |
fontFamily-Badge | none | none |
fontFamily-Badge-pill | none | none |
fontSize-Badge | 0.8em | 0.8em |
fontSize-Badge-pill | 0.8em | 0.8em |
fontStretch-Badge | none | none |
fontStretch-Badge-pill | none | none |
fontStyle-Badge | none | none |
fontStyle-Badge-pill | none | none |
fontVariant-Badge | none | none |
fontVariant-Badge-pill | none | none |
fontWeight-Badge | none | none |
fontWeight-Badge-pill | none | none |
letterSpacing-Badge | none | none |
letterSpacing-Badge-pill | none | none |
lineBreak-Badge | none | none |
lineBreak-Badge-pill | none | none |
lineHeight-Badge | none | none |
lineHeight-Badge-pill | none | none |
padding-Badge | $space-0_5 $space-2 | $space-0_5 $space-2 |
padding-Badge-pill | $space-0_5 $space-2 | $space-0_5 $space-2 |
paddingBottom-Badge | none | none |
paddingBottom-Badge-pill | none | none |
paddingHorizontal-Badge | none | none |
paddingHorizontal-Badge-pill | none | none |
paddingLeft-Badge | none | none |
paddingLeft-Badge-pill | none | none |
paddingRight-Badge | none | none |
paddingRight-Badge-pill | none | none |
paddingTop-Badge | none | none |
paddingTop-Badge-pill | none | none |
paddingVertical-Badge | none | none |
paddingVertical-Badge-pill | none | none |
textAlign-Badge | none | none |
textAlign-Badge-pill | none | none |
textAlignLast-Badge | none | none |
textAlignLast-Badge-pill | none | none |
textColor-Badge | $const-color-surface-0 | $const-color-surface-0 |
textColor-Badge-pill | none | none |
textDecorationColor-Badge | none | none |
textDecorationColor-Badge-pill | none | none |
textDecorationLine-Badge | none | none |
textDecorationLine-Badge-pill | none | none |
textDecorationStyle-Badge | none | none |
textDecorationStyle-Badge-pill | none | none |
textDecorationThickness-Badge | none | none |
textDecorationThickness-Badge-pill | none | none |
textIndent-Badge | none | none |
textIndent-Badge-pill | none | none |
textShadow-Badge | none | none |
textShadow-Badge-pill | none | none |
textTransform-Badge | none | none |
textTransform-Badge-pill | none | none |
textUnderlineOffset-Badge | none | none |
textUnderlineOffset-Badge-pill | none | none |
wordBreak-Badge | none | none |
wordBreak-Badge-pill | none | none |
wordSpacing-Badge | none | none |
wordSpacing-Badge-pill | none | none |
wordWrap-Badge | none | none |
wordWrap-Badge-pill | none | none |
writingMode-Badge | none | none |
writingMode-Badge-pill | none | none |