1. Components
  2. badge

Badge

Compact status indicator for counts, labels, or categories.

Demo

Badge Badge Badge Badge Badge 
<div class="flex flex-wrap gap-4">
    <x-ui.badge variant="subtle">Badge</x-ui.badge>
    <x-ui.badge variant="soft" intent="primary">Badge</x-ui.badge>
    <x-ui.badge variant="outline" intent="destructive">Badge</x-ui.badge>
    <x-ui.badge intent="success">Badge</x-ui.badge>
    <x-ui.badge intent="neutral">Badge</x-ui.badge>
</div>

Installation

Shell 
php artisan flexi:add badge

API

Prop Description
variant (solid|soft|subtle|outline|default)
Visual style of the badge.
intent (string)
Semantic color intent for the selected variant.
size (xs|sm|default|lg)
Controls badge size and text rhythm.
radius (string)
Rounding token applied through utility classes.

Examples

Variants

Solid

Badge Gray Badge Primary Badge Secondary Badge Accent Badge Success Badge Destructive Badge Neutral 
<div class="flex flex-wrap gap-4">
    <x-ui.badge>Badge Gray</x-ui.badge>
    <x-ui.badge intent="primary">Badge Primary</x-ui.badge>
    <x-ui.badge intent="secondary">Badge Secondary</x-ui.badge>
    <x-ui.badge intent="accent">Badge Accent</x-ui.badge>
    <x-ui.badge intent="success">Badge Success</x-ui.badge>
    <x-ui.badge intent="destructive">Badge Destructive</x-ui.badge>
    <x-ui.badge intent="neutral">Badge Neutral</x-ui.badge>
</div>

Outline

Badge Gray Badge Primary Badge Destructive Badge Success 
<div class="flex flex-wrap gap-4">
    <x-ui.badge variant="outline">Badge Gray</x-ui.badge>
    <x-ui.badge variant="outline" intent="primary">Badge Primary</x-ui.badge>
    <x-ui.badge variant="outline" intent="destructive">Badge Destructive</x-ui.badge>
    <x-ui.badge variant="outline" intent="success">Badge Success</x-ui.badge>
</div>

Soft

Badge Gray Badge Primary Badge Destructive Badge Success 
<div class="flex flex-wrap gap-4">
    <x-ui.badge variant="soft">Badge Gray</x-ui.badge>
    <x-ui.badge variant="soft" intent="primary">Badge Primary</x-ui.badge>
    <x-ui.badge variant="soft" intent="destructive">Badge Destructive</x-ui.badge>
    <x-ui.badge variant="soft" intent="success">Badge Success</x-ui.badge>
</div>

Subtle

Badge Gray Badge Primary Badge Destructive Badge Success 
<div class="flex flex-wrap gap-4">
    <x-ui.badge variant="subtle">Badge Gray</x-ui.badge>
    <x-ui.badge variant="subtle" intent="primary">Badge Primary</x-ui.badge>
    <x-ui.badge variant="subtle" intent="destructive">Badge Destructive</x-ui.badge>
    <x-ui.badge variant="subtle" intent="success">Badge Success</x-ui.badge>
</div>

With icon

12% 50% You're reaching out your limit 
<div class="flex flex-wrap gap-4">
    <x-ui.badge variant="soft" intent="success" class="d-flex-items-center gap-x-1">
        12%
        <x-ui.icon name="ph--trend-up" class="flex" />
    </x-ui.badge>
    <x-ui.badge variant="soft" intent="destructive" class="d-flex-items-center gap-x-1">
        50%
        <x-ui.icon name="ph--trend-down" class="flex" />
    </x-ui.badge>
    <x-ui.badge variant="soft" intent="warning" class="d-flex-items-center gap-x-1">
        You're reaching out your limit
        <x-ui.icon name="ph--warning" class="flex" />
    </x-ui.badge>
</div>
Prev
Alert

Inline notification...

Next
On this page