Components
Badge
Displays a badge, with semantic status tones (success, warning, danger, info, neutral).
php artisan blatui:add badge
Badge
<x-ui.badge>Badge</x-ui.badge>As Link
Dismissible
Design
Engineering
Marketing
{{-- Removable badges with a close button. --}}
<div class="flex flex-wrap items-center gap-2">
@foreach (['Design', 'Engineering', 'Marketing'] as $tag)
<x-ui.badge x-data="{ show: true }" x-show="show" variant="secondary" class="gap-1 pr-1">
{{ $tag }}
<button type="button" @click="show = false" aria-label="Remove {{ $tag }}" class="hover:bg-foreground/10 -my-px ml-0.5 inline-flex size-3.5 items-center justify-center rounded-full transition-colors">
<x-lucide-x class="size-3" />
</button>
</x-ui.badge>
@endforeach
</div>Gradient
Pro
New
Featured
{{-- Gradient-filled badges for emphasis. --}}
<div class="flex flex-wrap items-center gap-2">
<x-ui.badge class="border-transparent bg-linear-to-r from-indigo-500 to-pink-500 text-white">Pro</x-ui.badge>
<x-ui.badge class="border-transparent bg-linear-to-r from-sky-500 to-emerald-500 text-white">New</x-ui.badge>
<x-ui.badge class="border-transparent bg-linear-to-r from-amber-500 to-rose-500 text-white">
<x-lucide-sparkles aria-hidden="true" /> Featured
</x-ui.badge>
</div>Numbers
8
99
20+
<div class="flex flex-wrap items-center gap-3">
<x-ui.badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">8</x-ui.badge>
<x-ui.badge variant="destructive" class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">99</x-ui.badge>
<x-ui.badge variant="outline" class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">20+</x-ui.badge>
</div>Rich
CN
shadcn
Active
v1.8.0
{{-- Badges carrying an avatar or richer leading content. --}}
<div class="flex flex-wrap items-center gap-2">
<x-ui.badge variant="outline" class="h-auto gap-1.5 rounded-full py-1 pl-1">
<x-ui.avatar class="size-4">
<x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
<x-ui.avatar-fallback class="text-[0.5rem]">CN</x-ui.avatar-fallback>
</x-ui.avatar>
shadcn
</x-ui.badge>
<x-ui.badge variant="secondary" class="rounded-full">
<span class="size-1.5 rounded-full bg-emerald-500" aria-hidden="true"></span> Active
</x-ui.badge>
<x-ui.badge variant="outline" class="rounded-full">
v1.8.0 <x-lucide-arrow-right aria-hidden="true" />
</x-ui.badge>
</div>Sizes
Small
Default
Large
{{-- Three sizes via the `size` prop. --}}
<div class="flex flex-wrap items-center gap-2">
<x-ui.badge size="sm">Small</x-ui.badge>
<x-ui.badge size="default">Default</x-ui.badge>
<x-ui.badge size="lg">Large</x-ui.badge>
</div>Status
Online
Away
Offline
<div class="flex flex-wrap items-center gap-2">
<x-ui.badge variant="outline" class="gap-1.5">
<span class="size-1.5 rounded-full bg-emerald-500" aria-hidden="true"></span> Online
</x-ui.badge>
<x-ui.badge variant="outline" class="gap-1.5">
<span class="size-1.5 rounded-full bg-amber-500" aria-hidden="true"></span> Away
</x-ui.badge>
<x-ui.badge variant="outline" class="gap-1.5">
<span class="size-1.5 rounded-full bg-muted-foreground" aria-hidden="true"></span> Offline
</x-ui.badge>
</div>Tones
Confirmed
Pending
Declined
Info
Draft
Confirmed
Pending
Declined
Info
Draft
Confirmed
Pending
Declined
Info
Draft
<div class="flex flex-col gap-3">
{{-- soft (default for tones) --}}
<div class="flex flex-wrap items-center gap-2">
<x-ui.badge tone="success">Confirmed</x-ui.badge>
<x-ui.badge tone="warning">Pending</x-ui.badge>
<x-ui.badge tone="danger">Declined</x-ui.badge>
<x-ui.badge tone="info">Info</x-ui.badge>
<x-ui.badge tone="neutral">Draft</x-ui.badge>
</div>
{{-- solid --}}
<div class="flex flex-wrap items-center gap-2">
<x-ui.badge tone="success" variant="solid">Confirmed</x-ui.badge>
<x-ui.badge tone="warning" variant="solid">Pending</x-ui.badge>
<x-ui.badge tone="danger" variant="solid">Declined</x-ui.badge>
<x-ui.badge tone="info" variant="solid">Info</x-ui.badge>
<x-ui.badge tone="neutral" variant="solid">Draft</x-ui.badge>
</div>
{{-- outline --}}
<div class="flex flex-wrap items-center gap-2">
<x-ui.badge tone="success" variant="outline">Confirmed</x-ui.badge>
<x-ui.badge tone="warning" variant="outline">Pending</x-ui.badge>
<x-ui.badge tone="danger" variant="outline">Declined</x-ui.badge>
<x-ui.badge tone="info" variant="outline">Info</x-ui.badge>
<x-ui.badge tone="neutral" variant="outline">Draft</x-ui.badge>
</div>
</div>Variants
Default
Secondary
Destructive
Outline
<div class="flex flex-wrap items-center gap-2">
<x-ui.badge>Default</x-ui.badge>
<x-ui.badge variant="secondary">Secondary</x-ui.badge>
<x-ui.badge variant="destructive">Destructive</x-ui.badge>
<x-ui.badge variant="outline">Outline</x-ui.badge>
</div>With Icon
Verified
main
Error
Pending
<div class="flex flex-wrap items-center gap-2">
<x-ui.badge><x-lucide-badge-check aria-hidden="true" /> Verified</x-ui.badge>
<x-ui.badge variant="secondary"><x-lucide-git-branch aria-hidden="true" /> main</x-ui.badge>
<x-ui.badge variant="destructive"><x-lucide-triangle-alert aria-hidden="true" /> Error</x-ui.badge>
<x-ui.badge variant="outline"><x-lucide-clock aria-hidden="true" /> Pending</x-ui.badge>
</div>API Reference
Props, slots and exposed methods for
<x-ui.badge>.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant |
string
|
'default'
|
Visual style. Without a tone, use default/secondary/destructive/outline brand styles. With a tone set, variant selects the intensity (soft, solid or outline).
default
secondary
destructive
outline
soft
solid
|
tone |
string
|
— |
Semantic status colour. When set, variant chooses the intensity (soft by default) and overrides the brand variants above.
success
warning
danger
info
neutral
|
size |
string
|
'default'
|
Padding and type scale of the badge.
sm
default
lg
|
href |
string
|
— | When provided, the badge renders as an anchor link with hover styling instead of a span. |
Slots
| Slot | Description |
|---|---|
default |
The badge content — text, and optionally a leading or trailing SVG icon (sized automatically). |