Logo

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) or pill (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:
  1. Only change the background color
Example: only background color
  1. 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

VariableDefault Value (Light)Default Value (Dark)
backgroundColor-Badgergb(from $color-secondary-500 r g b / 0.6)rgb(from $color-secondary-500 r g b / 0.6)
backgroundColor-Badge-pillnonenone
border-Badge0px solid $borderColor0px solid $borderColor
border-Badge-pillnonenone
borderBottom-Badgenonenone
borderBottom-Badge-pillnonenone
borderBottomColor-Badgenonenone
borderBottomColor-Badge-pillnonenone
borderBottomStyle-Badgenonenone
borderBottomStyle-Badge-pillnonenone
borderBottomWidth-Badgenonenone
borderBottomWidth-Badge-pillnonenone
borderColor-Badgenonenone
borderColor-Badge-pillnonenone
borderEndEndRadius-Badgenonenone
borderEndEndRadius-Badge-pillnonenone
borderEndStartRadius-Badgenonenone
borderEndStartRadius-Badge-pillnonenone
borderHorizontal-Badgenonenone
borderHorizontal-Badge-pillnonenone
borderHorizontalColor-Badgenonenone
borderHorizontalColor-Badge-pillnonenone
borderHorizontalStyle-Badgenonenone
borderHorizontalStyle-Badge-pillnonenone
borderHorizontalWidth-Badgenonenone
borderHorizontalWidth-Badge-pillnonenone
borderLeft-Badgenonenone
borderLeft-Badge-pillnonenone
color-Badgenonenone
color-Badge-pillnonenone
borderLeftStyle-Badgenonenone
borderLeftStyle-Badge-pillnonenone
borderLeftWidth-Badgenonenone
borderLeftWidth-Badge-pillnonenone
borderRadius-Badge4px4px
borderRight-Badgenonenone
borderRight-Badge-pillnonenone
color-Badgenonenone
color-Badge-pillnonenone
borderRightStyle-Badgenonenone
borderRightStyle-Badge-pillnonenone
borderRightWidth-Badgenonenone
borderRightWidth-Badge-pillnonenone
borderStartEndRadius-Badgenonenone
borderStartEndRadius-Badge-pillnonenone
borderStartStartRadius-Badgenonenone
borderStartStartRadius-Badge-pillnonenone
borderStyle-Badgenonenone
borderStyle-Badge-pillnonenone
borderTop-Badgenonenone
borderTop-Badge-pillnonenone
borderTopColor-Badgenonenone
borderTopColor-Badge-pillnonenone
borderTopStyle-Badgenonenone
borderTopStyle-Badge-pillnonenone
borderTopWidth-Badgenonenone
borderTopWidth-Badge-pillnonenone
borderHorizontal-Badgenonenone
borderHorizontal-Badge-pillnonenone
borderVerticalColor-Badgenonenone
borderVerticalColor-Badge-pillnonenone
borderVerticalStyle-Badgenonenone
borderVerticalStyle-Badge-pillnonenone
borderVerticalWidth-Badgenonenone
borderVerticalWidth-Badge-pillnonenone
borderWidth-Badgenonenone
borderWidth-Badge-pillnonenone
direction-Badgenonenone
direction-Badge-pillnonenone
fontFamily-Badgenonenone
fontFamily-Badge-pillnonenone
fontSize-Badge0.8em0.8em
fontSize-Badge-pill0.8em0.8em
fontStretch-Badgenonenone
fontStretch-Badge-pillnonenone
fontStyle-Badgenonenone
fontStyle-Badge-pillnonenone
fontVariant-Badgenonenone
fontVariant-Badge-pillnonenone
fontWeight-Badgenonenone
fontWeight-Badge-pillnonenone
letterSpacing-Badgenonenone
letterSpacing-Badge-pillnonenone
lineBreak-Badgenonenone
lineBreak-Badge-pillnonenone
lineHeight-Badgenonenone
lineHeight-Badge-pillnonenone
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-Badgenonenone
paddingBottom-Badge-pillnonenone
paddingHorizontal-Badgenonenone
paddingHorizontal-Badge-pillnonenone
paddingLeft-Badgenonenone
paddingLeft-Badge-pillnonenone
paddingRight-Badgenonenone
paddingRight-Badge-pillnonenone
paddingTop-Badgenonenone
paddingTop-Badge-pillnonenone
paddingVertical-Badgenonenone
paddingVertical-Badge-pillnonenone
textAlign-Badgenonenone
textAlign-Badge-pillnonenone
textAlignLast-Badgenonenone
textAlignLast-Badge-pillnonenone
textColor-Badge$const-color-surface-0$const-color-surface-0
textColor-Badge-pillnonenone
textDecorationColor-Badgenonenone
textDecorationColor-Badge-pillnonenone
textDecorationLine-Badgenonenone
textDecorationLine-Badge-pillnonenone
textDecorationStyle-Badgenonenone
textDecorationStyle-Badge-pillnonenone
textDecorationThickness-Badgenonenone
textDecorationThickness-Badge-pillnonenone
textIndent-Badgenonenone
textIndent-Badge-pillnonenone
textShadow-Badgenonenone
textShadow-Badge-pillnonenone
textTransform-Badgenonenone
textTransform-Badge-pillnonenone
textUnderlineOffset-Badgenonenone
textUnderlineOffset-Badge-pillnonenone
wordBreak-Badgenonenone
wordBreak-Badge-pillnonenone
wordSpacing-Badgenonenone
wordSpacing-Badge-pillnonenone
wordWrap-Badgenonenone
wordWrap-Badge-pillnonenone
writingMode-Badgenonenone
writingMode-Badge-pillnonenone
This site is an XMLUI™ app.