Badge

v1.0.0

Small labels for counts, states or metadata.

Default

Use .badge for a passive label.

Default

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

Background colors

Combine .badge with a background utility.

Primary Secondary Success Warning Error Inverse

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-error">Error</span>
<span class="badge bg-inverse">Inverse</span>

Outline

Add .badge-outline for an outline.

Primary Active Failed

<span class="badge badge-outline text-primary">Primary</span>
<span class="badge badge-outline text-success">Active</span>
<span class="badge badge-outline text-error">Failed</span>

CSS Variables

Override these variables on the component or an ancestor.

--badge-padding-y: var(--spacer-1);
--badge-padding-x: var(--spacer-2);
--badge-border-radius: 9999px;
--badge-font-size: var(--font-size-xs);
--badge-font-weight: 400;
--badge-bg-color: var(--bg-highlight);
--badge-color: var(--text-color);
--badge-border-width: var(--border-width);
--badge-border-color: transparent;