Base

Class	Description
.ui-badge	Base class

Size

Class	Value
.ui-badge--sm	sm
.ui-badge--lg	lg

Variant

Class	Value
.ui-badge--primary	primary
.ui-badge--success	success
.ui-badge--warning	warning
.ui-badge--danger	danger

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-badge-accent	var(--ui-color-bg-muted)	Accent color
--ui-badge-height	calc(var(--ui-row) * 1.5)	Overall height
--ui-badge-padding-x	var(--ui-space-1)	Horizontal padding
--ui-badge-font-size	var(--ui-font-size-xs)	Font size
--ui-badge-font-weight	var(--ui-font-weight-medium)	Font weight
--ui-badge-radius	var(--ui-radius-full)	Corner radius
--ui-badge-color	var(--ui-color-text)	Text color
--ui-badge-height-sm	var(--ui-row)	Overall height at small size
--ui-badge-padding-x-sm	var(--ui-space-0)	Horizontal padding at small size
--ui-badge-font-size-sm	calc(var(--ui-font-size-xs) * 0.85)	Font size at small size
--ui-badge-height-lg	var(--ui-row-2)	Overall height at large size
--ui-badge-padding-x-lg	var(--ui-space-2)	Horizontal padding at large size
--ui-badge-font-size-lg	var(--ui-font-size-md)	Font size at large size

<span class="ui-badge">Default</span>

<span class="ui-badge ui-badge--primary">Primary</span>

<span class="ui-badge ui-badge--success">Success</span>

<span class="ui-badge ui-badge--warning">Warning</span>

<span class="ui-badge ui-badge--danger">Danger</span>

<span class="ui-badge ui-badge--sm">Small</span>

<span class="ui-badge ui-badge--lg">Large</span>

<span class="ui-badge">Default</span>

<div class="ui-row">
  <span>Notifications</span>
  <span class="ui-badge ui-badge--primary">5</span>
</div>
<div class="ui-row">
  <span class="ui-badge ui-badge--success">Published</span>
  <span class="ui-badge ui-badge--warning">Draft</span>
  <span class="ui-badge ui-badge--danger">Archived</span>
</div>