Skip to content

Overview

The Badge component renders small inline labels used to highlight statuses, categories, counts, or tags. Badges support multiple color variants, sizes, outline and gradient styles, optional dot indicators, icons, and a removable close button.

Use badges for:

  • Status indicators (Active, Pending, Archived)
  • Category or tag labels
  • Notification counts
  • Feature flags or markers

Basic Usage

Active 
<x-aura::badge variant="success">Active</x-aura::badge>

Props

Prop Type Default Description
variant string 'primary' Color variant: primary, secondary, success, warning, danger, info
size string 'md' Size: sm, md, lg
dot bool false Show a small dot indicator before the text
icon string|null null Icon name displayed before the text
removable bool false Show a remove/close button after the text
outline bool false Outline style (transparent background, colored border)
gradient bool false Gradient background style
rounded bool false Fully rounded pill shape

Variants/Examples

Color Variants

Primary Secondary Success Warning Danger Info 
<x-aura::badge variant="primary">Primary</x-aura::badge>
<x-aura::badge variant="secondary">Secondary</x-aura::badge>
<x-aura::badge variant="success">Success</x-aura::badge>
<x-aura::badge variant="warning">Warning</x-aura::badge>
<x-aura::badge variant="danger">Danger</x-aura::badge>
<x-aura::badge variant="info">Info</x-aura::badge>

With Dot Indicator

Online Offline 
<x-aura::badge variant="success" dot>Online</x-aura::badge>
<x-aura::badge variant="danger" dot>Offline</x-aura::badge>

With Icon

Pending Verified 
<x-aura::badge variant="info" icon="clock">Pending</x-aura::badge>
<x-aura::badge variant="success" icon="check">Verified</x-aura::badge>

Outline Style

Draft Expired 
<x-aura::badge variant="primary" outline>Draft</x-aura::badge>
<x-aura::badge variant="danger" outline>Expired</x-aura::badge>

Gradient Style

Premium New 
<x-aura::badge variant="primary" gradient>Premium</x-aura::badge>
<x-aura::badge variant="success" gradient rounded>New</x-aura::badge>

Removable Badge (Tag Pattern)

Laravel Tailwind Alpine.js 
<x-aura::badge variant="info" removable>Laravel</x-aura::badge>
<x-aura::badge variant="info" removable>Tailwind</x-aura::badge>
<x-aura::badge variant="info" removable>Alpine.js</x-aura::badge>

Size Comparison

Small Medium Large 
<x-aura::badge variant="primary" size="sm">Small</x-aura::badge>
<x-aura::badge variant="primary" size="md">Medium</x-aura::badge>
<x-aura::badge variant="primary" size="lg">Large</x-aura::badge>

Slots

Slot Description
Default The badge text content

Events

When removable is set to true, a remove button is rendered. You can handle the click event with Alpine.js or Livewire:

{{-- Alpine.js --}}
<x-aura::badge variant="info" removable x-on:click="removeTag('laravel')">
    Laravel
</x-aura::badge>

{{-- Livewire --}}
<x-aura::badge variant="info" removable wire:click="removeTag('laravel')">
    Laravel
</x-aura::badge>

Accessibility

  • Badges render as <span> elements, which are inline and visible to screen readers.
  • The removable button includes aria-label="Remove" for assistive technology.
  • Color is supplemented by text content, so information is not conveyed by color alone.
  • When using badges as interactive elements, ensure they have appropriate ARIA roles.
  • Dot indicators are purely decorative; their meaning should be conveyed through the badge text.