Badge - Laravel Blade

Use the badge component to highlight important information, show notification counts, or label content with color-coded indicators.

Default Badges

Default Dark Red Green Yellow Indigo Purple Pink

Blade code

<div class="flex flex-wrap gap-2">
    <x-fwb.badge color="blue">Default</x-fwb.badge>
    <x-fwb.badge color="gray">Dark</x-fwb.badge>
    <x-fwb.badge color="red">Red</x-fwb.badge>
    <x-fwb.badge color="green">Green</x-fwb.badge>
    <x-fwb.badge color="yellow">Yellow</x-fwb.badge>
    <x-fwb.badge color="indigo">Indigo</x-fwb.badge>
    <x-fwb.badge color="purple">Purple</x-fwb.badge>
    <x-fwb.badge color="pink">Pink</x-fwb.badge>
</div>

Bordered Badges

Default Dark Red Green Yellow Indigo Purple Pink

Blade code

<div class="flex flex-wrap gap-2">
    <x-fwb.badge color="blue" :bordered="true">Default</x-fwb.badge>
    <x-fwb.badge color="gray" :bordered="true">Dark</x-fwb.badge>
    <x-fwb.badge color="red" :bordered="true">Red</x-fwb.badge>
    <x-fwb.badge color="green" :bordered="true">Green</x-fwb.badge>
    <x-fwb.badge color="yellow" :bordered="true">Yellow</x-fwb.badge>
    <x-fwb.badge color="indigo" :bordered="true">Indigo</x-fwb.badge>
    <x-fwb.badge color="purple" :bordered="true">Purple</x-fwb.badge>
    <x-fwb.badge color="pink" :bordered="true">Pink</x-fwb.badge>
</div>

Pill Badges

Default Dark Red Green Yellow Indigo Purple Pink

Blade code

<div class="flex flex-wrap gap-2">
    <x-fwb.badge color="blue" :pill="true">Default</x-fwb.badge>
    <x-fwb.badge color="gray" :pill="true">Dark</x-fwb.badge>
    <x-fwb.badge color="red" :pill="true">Red</x-fwb.badge>
    <x-fwb.badge color="green" :pill="true">Green</x-fwb.badge>
    <x-fwb.badge color="yellow" :pill="true">Yellow</x-fwb.badge>
    <x-fwb.badge color="indigo" :pill="true">Indigo</x-fwb.badge>
    <x-fwb.badge color="purple" :pill="true">Purple</x-fwb.badge>
    <x-fwb.badge color="pink" :pill="true">Pink</x-fwb.badge>
</div>

Large Badges

Default Dark Red Green Yellow

Blade code

<div class="flex flex-wrap gap-2">
    <x-fwb.badge color="blue" size="sm">Default</x-fwb.badge>
    <x-fwb.badge color="gray" size="sm">Dark</x-fwb.badge>
    <x-fwb.badge color="red" size="sm">Red</x-fwb.badge>
    <x-fwb.badge color="green" size="sm">Green</x-fwb.badge>
    <x-fwb.badge color="yellow" size="sm">Yellow</x-fwb.badge>
</div>

Badges with Icon

3 days ago 2 minutes ago

Blade code

<div class="flex flex-wrap gap-2">
    <x-fwb.badge color="blue">
        <x-fwb-o-clock class="w-2.5 h-2.5 me-1.5" />
        3 days ago
    </x-fwb.badge>
    <x-fwb.badge color="red">
        <x-fwb-o-clock class="w-2.5 h-2.5 me-1.5" />
        2 minutes ago
    </x-fwb.badge>
</div>

Badge as Link

Badge link Badge link

Blade code

<div class="flex flex-wrap gap-2">
    <x-fwb.badge color="blue" href="#">Badge link</x-fwb.badge>
    <x-fwb.badge color="blue" href="#" size="sm">Badge link</x-fwb.badge>
</div>

Icon Only Badge

Icon description Icon description

Blade code

<div class="flex flex-wrap gap-2">
    <x-fwb.badge color="blue" :iconOnly="true" :pill="true">
        <x-fwb-s-check-circle class="w-3 h-3" />
        <span class="sr-only">Icon description</span>
    </x-fwb.badge>
    <x-fwb.badge color="red" :iconOnly="true" :pill="true">
        <x-fwb-s-check-circle class="w-3 h-3" />
        <span class="sr-only">Icon description</span>
    </x-fwb.badge>
</div>

Dismissible Badges

Default Red Green Yellow

Blade code

<div class="flex flex-wrap gap-2">
    <x-fwb.badge color="blue" :dismissible="true">Default</x-fwb.badge>
    <x-fwb.badge color="red" :dismissible="true">Red</x-fwb.badge>
    <x-fwb.badge color="green" :dismissible="true">Green</x-fwb.badge>
    <x-fwb.badge color="yellow" :dismissible="true">Yellow</x-fwb.badge>
</div>

Component Properties

Badge x-fwb.badge

Prop Type Default Description
color string blue Badge color. Options: blue, red, green, yellow, indigo, purple, pink, gray.
size string xs Badge size. Options: xs (default), sm (large).
pill bool false Use a fully rounded pill shape instead of default rounded corners.
bordered bool false Add a border around the badge.
dismissible bool false Show a close button to dismiss the badge.
href string|null null Render as a link with the given URL.
iconOnly bool false Use compact padding for icon-only badges.
id string auto Unique identifier. Auto-generated if not provided. Used for dismiss targeting.