Badge

The Badge component can be used to highlight a short piece of information, like a status.

<Badge>New Data</Badge>

Emphasis and theme

Emphasis controls how the colour is applied. Theme controls the colour.

Semantic themes: success, warning, danger, neutral, info.

Non-semantic themes: primary, grey, blue, pink, purple, cyan, green, magenta, red, teal, orange, yellow, lime, lapis, maroon, marsh

The default option for theme is info.

Badges using a semantic theme should not be interactive, and do not have a hover style.

white

subtle

bold

Text overflow

<Tooltip.Provider>
  <Badge className="w-50" overflow="ellipsis">This text will be cut off as it is too long</Badge>
</Tooltip.Provider>

With icons

An <Icon /> can be passed as a child to show alongside text.

<div className="flex gap-3">
  <Badge emphasis="bold">
      <Badge.Icon is={Basketball} />
      <Badge.Text>Icon on the left</Badge.Text>
   </Badge>
  <Badge emphasis="bold">
      Icon on the right
      <Icon is={NeutralFace} />
   </Badge>
  <Badge emphasis="bold">
      <Icon is={Basketball} />
      Icons on both sides
      <Icon is={NeutralFace} />
   </Badge>
 </div>

Size

These are the available sizes for this component: xs, sm and md. The default is sm

The icon size is not linked to the badge size.

<div className="flex gap-3">
  <Badge size="xs"><Icon is={Pizza} />Small</Badge>
  <Badge size="sm"><Icon is={Pizza} />Medium</Badge>
  <Badge size="md"><Icon is={Pizza} />Large</Badge>
</div>

Badge.Icon & Badge.Text

It is not necessary to use these sub-components directly. If you use the regular Icon component and plain text as in the above examples it will convert to the appropriate Badge sub-component.