Badge

Overview

The Badge component renders a small inline label for categorizing or highlighting status. It supports multiple variants and sizes, and works seamlessly with Blade templates and Livewire.

Installation

composer require unified-ui/laravel

Publish the component views (optional):

php artisan vendor:publish --tag=unified-ui-views

Copy the Badge Blade component into your project:

resources/views/components/ui/badge.blade.php

Usage

Basic Badge

<x-ui-badge>Default</x-ui-badge>

Variants

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

Sizes

<x-ui-badge size="sm">Small</x-ui-badge>
<x-ui-badge size="md">Medium</x-ui-badge>
<x-ui-badge size="lg">Large</x-ui-badge>

With Dot Indicator

<x-ui-badge variant="success" dot>Active</x-ui-badge>
<x-ui-badge variant="danger" dot>Offline</x-ui-badge>

Removable Badge

Use the removable prop alongside Alpine.js or Livewire to handle dismiss actions:

<x-ui-badge variant="primary" removable @remove="handleRemove">
    Tag Label
</x-ui-badge>

In a Livewire Component

{{-- resources/views/livewire/user-tags.blade.php --}}
<div class="flex flex-wrap gap-2">
    @foreach($tags as $tag)
        <x-ui-badge
            variant="secondary"
            removable
            wire:click="removeTag('{{ $tag->id }}')"
        >
            {{ $tag->name }}
        </x-ui-badge>
    @endforeach
</div>

Props

Prop	Type	Default	Description
`variant`	`string`	`"default"`	Visual style: `default`, `primary`, `secondary`, `success`, `warning`, `danger`, `outline`
`size`	`string`	`"md"`	Badge size: `sm`, `md`, `lg`
`dot`	`bool`	`false`	Show a colored dot indicator before the label
`removable`	`bool`	`false`	Show a close/remove button
`class`	`string`	`""`	Additional CSS classes to merge

Blade Component Source

{{-- resources/views/components/ui/badge.blade.php --}}
@props([
    'variant' => 'default',
    'size' => 'md',
    'dot' => false,
    'removable' => false,
])

@php
$variantClasses = match($variant) {
    'primary'   => 'bg-primary text-primary-foreground',
    'secondary' => 'bg-secondary text-secondary-foreground',
    'success'   => 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400',
    'warning'   => 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400',
    'danger'    => 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
    'outline'   => 'border border-border text-foreground bg-transparent',
    default     => 'bg-muted text-muted-foreground',
};

$sizeClasses = match($size) {
    'sm' => 'text-xs px-1.5 py-0.5',
    'lg' => 'text-sm px-3 py-1',
    default => 'text-xs px-2.5 py-0.5',
};
@endphp

<span
    {{ $attributes->merge([
        'class' => "inline-flex items-center gap-1 font-medium rounded-full transition-colors $variantClasses $sizeClasses",
        'data-ds-component' => 'badge',
        'data-ds-variant' => $variant,
        'data-ds-size' => $size,
    ]) }}
>
    @if($dot)
        <span @class([
            'size-1.5 rounded-full',
            'bg-current opacity-70',
        ])></span>
    @endif

    {{ $slot }}

    @if($removable)
        <button
            type="button"
            class="ml-0.5 -mr-1 inline-flex items-center justify-center size-4 rounded-full hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
            {{ $attributes->whereStartsWith('wire:click') }}
            {{ $attributes->whereStartsWith('@remove') }}
        >
            <x-lucide-x class="size-3" />
            <span class="sr-only">Remove</span>
        </button>
    @endif
</span>

The Badge component uses Tailwind CSS utility classes that map to the same design tokens as the React version — ensuring visual consistency across your Laravel and React applications.

Accessibility

Uses a <span> element by default — suitable for inline labels.
The removable button includes an sr-only label for screen readers.
Color variants maintain WCAG AA contrast ratios.
Dot indicators use opacity-70 of the current text color for visual harmony.

On this page