Components
Badge
A small label for a plan, environment, or status, with an optional dot or icon and an optional remove button.
A badge is a compact label. Its tone picks the color (neutral, the accent tint, the three
states, or one of eight tag colors). Two sizes, an optional dot or icon before the label, and an
optional remove button after it.
Preview
Tones
DraftBetaLiveDegradedFailed
Colours
SearchReasoningDataBillingUrgentReviewDesignOps
Live
Queued
Dot or icon
RunningIdlePrivateAgent
Removable
ProductionStagingPreview
Usage
<!-- include core.css + badge.css -->
<span class="bdg" data-tone="success">Live</span>
<span class="bdg live" data-tone="success"><span class="bdg-dot"></span>Running</span>
<span class="bdg sm" data-tone="accent">Pro</span>Properties
| Name | Type | Description |
|---|---|---|
tone | neutral | accent | success | warning | danger | blue | violet | green | orange | red | yellow | pink | teal | Color as text on its own tint. Neutral by default. |
size | sm | md | sm is 20px tall, md is 24px (the default). |
dot | boolean | A dot in the badge's color before the label. |
icon | IconName | An icon before the label. |
onRemove / remove | callback | Shows a remove button after the label. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). In
Blueprint the badge is squared off and set in small caps with a hairline in its own color; in Soft
it is a pill.