Start building

Platform

Open Source

Resources

Sign in

Badge

x-badge

A small label for status, counts and categories. Solid, soft status and outline variants in three sizes, with an optional icon and pill shape.

php artisan components:add badge

Examples

Variants

Solid, soft status and outline treatments.

<div class="flex flex-wrap items-center justify-center gap-2">
    <x-components.badge>Primary</x-components.badge>
    <x-components.badge variant="secondary">Secondary</x-components.badge>
    <x-components.badge variant="outline">Outline</x-components.badge>
    <x-components.badge variant="success">Success</x-components.badge>
    <x-components.badge variant="info">Info</x-components.badge>
    <x-components.badge variant="warning">Warning</x-components.badge>
    <x-components.badge variant="destructive">Destructive</x-components.badge>
</div>

Sizes & pill

Three sizes, plus a pill shape with a leading icon.

<div class="flex flex-wrap items-center justify-center gap-2">
    <x-components.badge size="sm">Small</x-components.badge>
    <x-components.badge size="md">Medium</x-components.badge>
    <x-components.badge size="lg">Large</x-components.badge>
    <x-components.badge variant="success" pill>
        <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
        Verified
    </x-components.badge>
</div>

Props

Prop Type Default Description
variant select primary · secondary · outline · destructive · info · success · warning primary The color treatment of the badge.
size select sm · md · lg sm The size of the badge.
icon text — Optional component name to render as an icon (e.g. a Blade icon).
iconPosition select before · after before Render the icon before or after the label.
pill boolean false Use a fully rounded pill shape instead of the default rounded corners.

Slots

Slot Description
slot The main content for the badge.