Badge

A small label for statuses, categories, and counts. Supports colors, sizes, icons, and pill variant.

Colors

Default Zinc Red Orange Amber Yellow Lime Green Emerald Teal Cyan Sky Blue Indigo Violet Purple Fuchsia Pink Rose

<x-boson::badge>Default</x-boson::badge>
<x-boson::badge color="red">Red</x-boson::badge>
<x-boson::badge color="green">Green</x-boson::badge>
<x-boson::badge color="blue">Blue</x-boson::badge>
<x-boson::badge color="yellow">Yellow</x-boson::badge>
<x-boson::badge color="purple">Purple</x-boson::badge>

Pill variant

Default Red Green Blue Yellow Purple

<x-boson::badge variant="pill">Default</x-boson::badge>
<x-boson::badge variant="pill" color="red">Red</x-boson::badge>
<x-boson::badge variant="pill" color="green">Green</x-boson::badge>
<x-boson::badge variant="pill" color="blue">Blue</x-boson::badge>
<x-boson::badge variant="pill" color="yellow">Yellow</x-boson::badge>
<x-boson::badge variant="pill" color="purple">Purple</x-boson::badge>

Sizes

Extra Small Small Default Large

<x-boson::badge color="blue" size="xs">Extra Small</x-boson::badge>
<x-boson::badge color="blue" size="sm">Small</x-boson::badge>
<x-boson::badge color="blue">Default</x-boson::badge>
<x-boson::badge color="blue" size="lg">Large</x-boson::badge>

With icons

Active Remove Notifications

<x-boson::badge color="green" icon="check">Active</x-boson::badge>
<x-boson::badge color="red" icon:trailing="x-mark">Remove</x-boson::badge>
<x-boson::badge color="blue" icon="bell">Notifications</x-boson::badge>

As link or button

Link badge

<x-boson::badge as="a" href="#" color="indigo">Link badge</x-boson::badge>
<x-boson::badge as="button" color="rose">Button badge</x-boson::badge>

In a table

Name	Status	Role
Alice	Active	Admin
Bob	Pending	Editor
Charlie	Inactive	Viewer

<x-boson::table hoverable>
    <x-boson::table.head>
        <x-boson::table.row>
            <x-boson::table.header>Name</x-boson::table.header>
            <x-boson::table.header>Status</x-boson::table.header>
            <x-boson::table.header>Role</x-boson::table.header>
        </x-boson::table.row>
    </x-boson::table.head>
    <x-boson::table.body>
        <x-boson::table.row>
            <x-boson::table.data>Alice</x-boson::table.data>
            <x-boson::table.data>
                <x-boson::badge color="green" size="sm" icon="check">Active</x-boson::badge>
            </x-boson::table.data>
            <x-boson::table.data>
                <x-boson::badge color="purple" size="sm">Admin</x-boson::badge>
            </x-boson::table.data>
        </x-boson::table.row>
        <x-boson::table.row>
            <x-boson::table.data>Bob</x-boson::table.data>
            <x-boson::table.data>
                <x-boson::badge color="yellow" size="sm" icon="clock">Pending</x-boson::badge>
            </x-boson::table.data>
            <x-boson::table.data>
                <x-boson::badge color="blue" size="sm">Editor</x-boson::badge>
            </x-boson::table.data>
        </x-boson::table.row>
    </x-boson::table.body>
</x-boson::table>

Props

Prop	Type	Default	Description
`color`	`string`	`gray`	Badge color: zinc, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
`variant`	`string`	`null`	Set to "pill" for fully rounded corners
`size`	`string`	`md`	Badge size: xs, sm, md, lg
`icon`	`string`	`null`	Leading Heroicon name
`icon:trailing`	`string`	`null`	Trailing Heroicon name
`as`	`string`	`span`	HTML element: span, a, button