Highlights a small piece of information

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

Edit me!

Theme

These are the available themes for this component: success, warning, danger, neutral and info. The default is info

<>
<Badge>Info</Badge>
<Badge theme="neutral">Neutral</Badge>
<Badge theme="success">Success</Badge>
<Badge theme="warning">Warning</Badge>
<Badge theme="danger">Danger</Badge>
</>

Size

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

<>
<Badge size="xs">extra small</Badge>
<Badge size="sm">small</Badge>
<Badge size="md">medium</Badge>
</>

With icons

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

<>
<Badge>
<Icon is={Wifi} />
Info with icon
</Badge>
<Badge theme="neutral">
Info with icon
<Icon is={Wifi} />
</Badge>
</>

API Reference

PropTypeDefaultRequired
theme
"success" | "danger" | "warning" | "neutral" | "info"
info

-

size
"xs" | "sm" | "md"
sm

-

cssCSSProperties

-

-