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="warning">Badge</x-ui.badge>
    <x-ui.badge intent="danger">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 Neutral Badge Primary Badge Secondary Badge Accent Badge Warning Badge danger Badge Info Badge Success 
<div class="flex flex-wrap gap-4">
    <x-ui.badge>Badge Gray</x-ui.badge>
    <x-ui.badge intent="neutral">Badge Neutral</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="warning">Badge Warning</x-ui.badge>
    <x-ui.badge intent="danger">Badge danger</x-ui.badge>
    <x-ui.badge intent="info">Badge Info</x-ui.badge>
    <x-ui.badge intent="success">Badge Success</x-ui.badge>
</div>

Outline

Badge Gray Badge Neutral Badge Primary Badge Secondary Badge Accent Badge Warning Badge danger Badge Info 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="neutral">Badge Neutral</x-ui.badge>
    <x-ui.badge variant="outline" intent="primary">Badge Primary</x-ui.badge>
    <x-ui.badge variant="outline" intent="secondary">Badge Secondary</x-ui.badge>
    <x-ui.badge variant="outline" intent="accent">Badge Accent</x-ui.badge>
    <x-ui.badge variant="outline" intent="warning">Badge Warning</x-ui.badge>
    <x-ui.badge variant="outline" intent="danger">Badge danger</x-ui.badge>
    <x-ui.badge variant="outline" intent="info">Badge Info</x-ui.badge>
    <x-ui.badge variant="outline" intent="success">Badge Success</x-ui.badge>
</div>

Soft

Badge Gray Badge Neutral Badge Primary Badge Secondary Badge Accent Badge Warning Badge danger Badge Info 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="neutral">Badge Neutral</x-ui.badge>
    <x-ui.badge variant="soft" intent="primary">Badge Primary</x-ui.badge>
    <x-ui.badge variant="soft" intent="secondary">Badge Secondary</x-ui.badge>
    <x-ui.badge variant="soft" intent="accent">Badge Accent</x-ui.badge>
    <x-ui.badge variant="soft" intent="warning">Badge Warning</x-ui.badge>
    <x-ui.badge variant="soft" intent="danger">Badge danger</x-ui.badge>
    <x-ui.badge variant="soft" intent="info">Badge Info</x-ui.badge>
    <x-ui.badge variant="soft" intent="success">Badge Success</x-ui.badge>
</div>

Subtle

Badge Gray Badge Neutral Badge Primary Badge Secondary Badge Accent Badge Warning Badge danger Badge Info 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="neutral">Badge Neutral</x-ui.badge>
    <x-ui.badge variant="subtle" intent="primary">Badge Primary</x-ui.badge>
    <x-ui.badge variant="subtle" intent="secondary">Badge Secondary</x-ui.badge>
    <x-ui.badge variant="subtle" intent="accent">Badge Accent</x-ui.badge>
    <x-ui.badge variant="subtle" intent="warning">Badge Warning</x-ui.badge>
    <x-ui.badge variant="subtle" intent="danger">Badge danger</x-ui.badge>
    <x-ui.badge variant="subtle" intent="info">Badge Info</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%
        <span aria-hidden="true" class="flex iconify ph--trend-up"></span>
    </x-ui.badge>
    <x-ui.badge variant="soft" intent="danger" class="d-flex-items-center gap-x-1">
        50%
        <span aria-hidden="true" class="flex iconify ph--trend-down"></span>
    </x-ui.badge>
    <x-ui.badge variant="soft" intent="warning" class="d-flex-items-center gap-x-1">
        You're reaching out your limit
        <span aria-hidden="true" class="flex iconify ph--warning"></span>
    </x-ui.badge>
</div>
Prev
Alert

Inline notification...

Next
On this page