Badge

Displays a short label used to convey the semantic status of an object. Badges use color and, optionally, an icon to provide quick visual cues and reinforce meaning at a glance.

Usage

Use badges to highlight status, category, or state in a compact and non-intrusive way. Select the appropriate semantic variant to match the context and intent. Avoid overusing badges or relying on color alone and ensure the meaning remains clear through text or iconography. The outline variant can be used when a more subtle visual emphasis is required.

API Reference

Component attubute(s)

x-h-badge

Attributes

Attribute	Type	Required	Description
data-variant	primary positive negative warning information outline	false	Semantic color

Examples

<div x-h-badge>Badge</div>
<div x-h-badge data-variant="primary">Primary</div>
<div x-h-badge data-variant="positive"><i role="img" data-lucide="check"></i>Positive</div>
<div x-h-badge data-variant="negative"><i role="img" data-lucide="x"></i>Negative</div>
<div x-h-badge data-variant="warning"><i role="img" data-lucide="siren"></i>Warning</div>
<div x-h-badge data-variant="information"><i role="img" data-lucide="info"></i>Information</div>
<div x-h-badge data-variant="outline">Outline</div>
<a x-h-badge href="#">Link</a>