Badge
Small visual elements for labeling, categorizing, or status indicators.
Examples
Badge Styles
Default
Secondary
Destructive
Outline
Success
blade
<x-plume::badge>Default</x-plume::badge>
<x-plume::badge style="secondary">Secondary</x-plume::badge>
<x-plume::badge style="error">Destructive</x-plume::badge>
<x-plume::badge style="outline">Outline</x-plume::badge>
<x-plume::badge style="success">Success</x-plume::badge>Interactive Badge
New Feature
blade
<x-plume::badge class="cursor-pointer hover:bg-primary/20 transition-colors"
x-on:click="$store.toasts.add({ title: 'Badge Clicked', type: 'success' })">
New Feature
</x-plume::badge>| Prop | Type | Default | Description |
|---|---|---|---|
| style | string | 'default' | Visual style: 'default', 'secondary', 'error', 'outline', 'success'. |
| size | string | 'md' | Size of the badge: 'sm', 'md', 'lg'. |
| shape | string | 'default' | Shape: 'default' (rounded), 'pill', 'square'. |
Usage
blade
<x-plume::badge style="secondary">New</x-plume::badge>