Badge

Badges look similar to alerts but are used to inform the user of the status of a specific component with a 1-word-long message.

Message!

Badge with icon

<x-badge label="Message!" color="error" variant="soft"/>

<x-badge label="Badge with icon" icon="heroicon-o-identification"/>

Badges are ideal to place inside other controls. This works including in cases where they are not given any label, though such cases require the size and/or padding to be specified.
Check the Indicator page for an alternative to placing badges inside other components.

<x-button>
  Inbox <x-badge class="badge-sm" color="info" label="10+"/>
</x-button>
<x-button>
  Inbox <x-badge class="size-2 px-0 py-0" color="primary"/>
</x-button>

#Styling

Use the color attribute to highlight / better convey what your message is about.
The style attribute can be used in parallel to create soft, ghost, outline or dash-styled badges.

Default

Soft, default

Outline, default

Dash, default

Neutral

Soft, neutral

Outline, neutral

Dash, neutral

Primary

Soft, primary

Outline, primary

Dash, primary

Secondary

Soft, secondary

Outline, secondary

Dash, secondary

Accent

Soft, accent

Outline, accent

Dash, accent

Info

Soft, info

Outline, info

Dash, info

Success

Soft, success

Outline, success

Dash, success

Warning

Soft, warning

Outline, warning

Dash, warning

Error

Soft, error

Outline, error

Dash, error

<!-- Default color -->
<x-badge label="Default"/>
<x-badge label="Soft, default"    variant="soft"/>
<x-badge label="Outline, default" variant="outline"/>
<x-badge label="Dash, default"    variant="dash"/>

<!-- Neutral color -->
<x-badge color="neutral" label="Neutral"/>
<x-badge color="neutral" label="Soft, neutral"    variant="soft"/>
<x-badge color="neutral" label="Outline, neutral" variant="outline"/>
<x-badge color="neutral" label="Dash, neutral"    variant="dash"/>

<!-- Primary color -->
<x-badge color="primary" label="Primary"/>
<x-badge color="primary" label="Soft, primary"    variant="soft"/>
<x-badge color="primary" label="Outline, primary" variant="outline"/>
<x-badge color="primary" label="Dash, primary"    variant="dash"/>

<!-- Secondary color -->
<x-badge color="secondary" label="Secondary"/>
<x-badge color="secondary" label="Soft, secondary"    variant="soft"/>
<x-badge color="secondary" label="Outline, secondary" variant="outline"/>
<x-badge color="secondary" label="Dash, secondary"    variant="dash"/>

<!-- Accent color -->
<x-badge color="accent" label="Accent"/>
<x-badge color="accent" label="Soft, accent"    variant="soft"/>
<x-badge color="accent" label="Outline, accent" variant="outline"/>
<x-badge color="accent" label="Dash, accent"    variant="dash"/>

<!-- Info color -->
<x-badge color="info" label="Info"/>
<x-badge color="info" label="Soft, info"    variant="soft"/>
<x-badge color="info" label="Outline, info" variant="outline"/>
<x-badge color="info" label="Dash, info"    variant="dash"/>

<!-- Success color -->
<x-badge color="success" label="Success"/>
<x-badge color="success" label="Soft, success"    variant="soft"/>
<x-badge color="success" label="Outline, success" variant="outline"/>
<x-badge color="success" label="Dash, success"    variant="dash"/>

<!-- Warning color -->
<x-badge color="warning" label="Warning"/>
<x-badge color="warning" label="Soft, warning"    variant="soft"/>
<x-badge color="warning" label="Outline, warning" variant="outline"/>
<x-badge color="warning" label="Dash, warning"    variant="dash"/>

<!-- Error color -->
<x-badge color="error" label="Error"/>
<x-badge color="error" label="Soft, error"    variant="soft"/>
<x-badge color="error" label="Outline, error" variant="outline"/>
<x-badge color="error" label="Dash, error"    variant="dash"/>

#Size

Like most controls, 5 sizes are available for badges.

Huge

Large

Medium

Small

Tiny

<x-badge color="primary" icon="heroicon-o-currency-dollar" label="Huge"   size="xl"/>
<x-badge color="primary" icon="heroicon-o-currency-euro"   label="Large"  size="lg"/>
<x-badge color="primary" icon="heroicon-o-currency-yen"    label="Medium" size="md"/>
<x-badge color="primary" icon="heroicon-o-currency-pound"  label="Small"  size="sm"/>
<x-badge color="primary" icon="heroicon-o-currency-rupee"  label="Tiny"   size="xs"/>