Aura Wire

Livewire UI Kit

Display

Component

Badge

Compact status pills and indicators for metadata, order states, role tags, and metric notifications.

Component Syntax

blade 
<x-aura::badge variant="subtle" size="md">
    Active
</x-aura::badge>

1. Badge Variants

blade
Neutral Subtle Completed Pending Failed Progress

2. Badge Sizes

blade
Extra Small Small Medium Large Extra Large

3. Real World Status Cards

blade

Order 10429

Paid

Order 10428

Pending

Component Props

Available properties and configurations for the badge component.

Prop Default Available Values

variant

neutral
neutral subtle positive warning negative info primary

size

md
xs sm md lg xl

shape

pill
pill rounded

icon

null

Icon name string

pill

false
true false

rounded

false
true false