Laravel Badge Component
Free · MITSmall status indicators and labels for categorization, counts, and states.
A Badge built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4.
Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag:
<x-aura::badge>
Installation
composer require bluestarsystem/aura-uiUsage
<x-aura::badge variant="success">Active</x-aura::badge>See the full API, props and live examples in the Badge documentation.
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
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 |
Slots
| Slot | Description |
|---|---|
| Default | The badge text content |
See more examples and every variant in the Badge documentation.