Badge

Tint chips for status and labels.

Variants

A 25% tint of the status color with its ink on top. default is a tint of the foreground for neutral labels.

DefaultHealthyPendingLiquidatable

<Badge>Default</Badge>
<Badge variant="success">Healthy</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="destructive">Liquidatable</Badge>

Inline

Badges sit next to a heading or a row label. 11px text with no leading keeps the chip tight.

pondSOL

Healthy

<Box alignItems="center" columnGap="2">
  <Text variant="heading-xs">pondSOL</Text>
  <Badge variant="success">Healthy</Badge>
</Box>

Props

Badge is closed apart from the className bridge. Pick a variant, the chip sizes to its label.

childrenReactNoderequired

The label. Keep it to a word or two.

variantBadgeVariantdefault: 'default'

The tint and its ink.

classNamestring

Appended after the badge's own classes. A bridge for tailwind product code.