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>

<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>

<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>

<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>

<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>

<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>