Badge Component

The Badge component displays small labels, tags, or status indicators. It supports multiple sizes, styles, and color variants.

Usage

The simplest way to use the badge component:

<x-badge>New</x-badge>

Sizes

The badge component supports five different sizes:

<x-badge size="xxs">Extra Extra Small</x-badge>
<x-badge size="xs">Extra Small</x-badge>
<x-badge size="sm">Small</x-badge>
<x-badge size="md">Medium</x-badge>
<x-badge size="lg">Large</x-badge>

Solid Variants

Solid badges with background colors:

<x-badge variant="default">Default</x-badge>
<x-badge variant="primary">Primary</x-badge>
<x-badge variant="secondary">Secondary</x-badge>
<x-badge variant="info">Info</x-badge>
<x-badge variant="success">Success</x-badge>
<x-badge variant="warning">Warning</x-badge>
<x-badge variant="danger">Danger</x-badge>

Outline Variants

Outline badges with colored borders and text:

<x-badge variant="outline-default">Default</x-badge>
<x-badge variant="outline-primary">Primary</x-badge>
<x-badge variant="outline-secondary">Secondary</x-badge>
<x-badge variant="outline-info">Info</x-badge>
<x-badge variant="outline-success">Success</x-badge>
<x-badge variant="outline-warning">Warning</x-badge>
<x-badge variant="outline-danger">Danger</x-badge>

With Icons

Badges can include icons alongside text:

<x-badge variant="success">
    <x-icons.check variant="micro" size="xs" />
    Verified
</x-badge>

<x-badge variant="outline-warning">
    <x-icons.exclamation-triangle variant="micro" size="xs" />
    Warning
</x-badge>

<x-badge variant="info">
    <x-icons.information-circle variant="micro" size="xs" />
    Info
</x-badge>

Props Reference

Prop	Type	Default	Description
variant	string	default	Style variant. Options: default, primary, secondary, info, success, warning, danger. Prefix with outline- for outline style (e.g., outline-primary).
size	string	xs	Badge size. Options: xxs, xs, sm, md, lg

Slots

Slot	Description
Default slot	Badge content. Can contain text, icons, or both. The component automatically handles spacing between elements.

References

Category	Path / Name	Description
Component	resources/views/components/badge.blade.php	Badge component file

For the detailed documentation, please visit the Penguin UI Avatars.