Badge

The Badge is a text label that accepts a color map to define its background color and, optionally, its label color.

Properties

colorMap

The Badge component supports the mapping of a list of colors using the value prop as the key. Provide the component with a list or key-value pairs in two ways:

1. Only change the background color

<App var.simpleColorMap="{{ important: 'red', regular: 'blue', unimportant: 'black' }}">
  <Badge value="important" colorMap="{simpleColorMap}" />
</App>

2. 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>

value (required)

The text that the component displays

<App>
  <Badge value="Example badge" />
</App>  

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>

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

The Badge component uses these theme variables to customize its appearance:

• backgroundColor-Badge
• textColor-Badge

There are also variant specific styling options:

badge

• borderRadius-Badge
• fontSize-Badge
• fontWeight-Badge
• padding-Badge
• paddingHorizontal-Badge
• paddingVertical-Badge

pill

• fontSize-Badge-pill
• fontWeight-Badge-pill
• padding-Badge-pill
• paddingHorizontal-Badge-pill
• paddingVertical-Badge-pill

Theme Variables