Badge

The Badge is a small status indicator for another element.

Props

Prop	Type	Default	Description
value	string	''	Text or number to display inside the badge.
size	string	'pill'	Controls the badge shape. Options: • 'pill' (rounded) • 'badge' (rectangle) • 'iconOnly' (circular, for icon-only badges).
severity	string	''	Sets the badge color. Options: • 'error' • 'warning' • 'success' • 'blue' • 'purple' • 'pink' • '' (gray)

Example component with all props

<Badge value="label" size="pill" severity="error" />

Label

Sizes

Badges support multiple shapes: pill (rounded), badge (rectangle), and iconOnly (circular for icons).

<!-- Pill (default) -->
<Badge value="Pill" size="pill" />

<!-- Badge (rectangle) -->
<Badge value="Badge" size="badge" />

<!-- Icon only (circular) -->
<Badge size="iconOnly">
  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
    <path d="M6 2.5V9.5M2.5 6H9.5" stroke="#71717B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
</Badge>

Pill

Badge

Severity (Colors)

You can set the badge color using the severity prop.
If no severity is provided, the badge uses the default (gray) color:

<!-- Default (no severity) -->
<Badge value="Default" />

<Badge value="Error" severity="error" />
<Badge value="Warning" severity="warning" />
<Badge value="Success" severity="success" />
<Badge value="Blue" severity="blue" />
<Badge value="Purple" severity="purple" />
<Badge value="Pink" severity="pink" />

Default

Error

Warning

Success

Blue

Purple

Pink

Usage Examples

You can also include custom content, such as an icon or SVG, inside the badge.
For example, to display a dot icon before the label, place the SVG as a child of the <Badge> component:

<Badge size="badge">
  <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
    <circle cx="4.00002" cy="4" r="3" fill="#71717B"/>
  </svg>
  Label
</Badge>

This will render the badge in a rectangular style (size="badge") with a dot icon followed by the label text.

Label

You can also place an icon or SVG after the label inside the badge.
For example, to display an "X" icon after the label, add the SVG as a child of the <Badge> component, following the label text:

<Badge size="badge">
  Label
  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
    <path d="M9 3L3 9M3 3L9 9" stroke="#9F9FA9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
</Badge>

This will render the badge in a rectangular style (size="badge") with the label text followed by an "X" icon.

Label