Badge

<div class="flex flex-wrap gap-4">
    <span class="rd-xl badge-md ui-subtle ui-subtle-gray">Badge</span>
    <span class="rd-xl badge-md ui-soft ui-soft-primary">Badge</span>
    <span class="rd-xl badge-md ui-outline ui-outline-warning">Badge</span>
    <span class="rd-xl badge-md ui-solid ui-solid-danger">Badge</span>
    <span class="rd-xl badge-md ui-solid ui-solid-neutral text-sub-title-reverse">Badge</span>
</div>

<div class="flex flex-wrap gap-4">
    <span class="rd-xl badge-md ui-solid ui-solid-gray">Badge Gray</span>
    <span class="rd-xl badge-md ui-solid ui-solid-neutral">Badge Neutral</span>
    <span class="rd-xl badge-md ui-solid ui-solid-primary">Badge Primary</span>
    <span class="rd-xl badge-md ui-solid ui-solid-secondary">Badge Secondary</span>
    <span class="rd-xl badge-md ui-solid ui-solid-accent">Badge Accent</span>
    <span class="rd-xl badge-md ui-solid ui-solid-warning">Badge Warning</span>
    <span class="rd-xl badge-md ui-solid ui-solid-danger">Badge danger</span>
    <span class="rd-xl badge-md ui-solid ui-solid-info">Badge Info</span>
    <span class="rd-xl badge-md ui-solid ui-solid-success">Badge Success</span>
</div>

<div class="flex flex-wrap gap-4">
    <span class="rd-xl badge-md ui-soft ui-soft-gray">Badge Gray</span>
    <span class="rd-xl badge-md ui-soft ui-soft-neutral">Badge Neutral</span>
    <span class="rd-xl badge-md ui-soft ui-soft-primary">Badge Primary</span>
    <span class="rd-xl badge-md ui-soft ui-soft-secondary">Badge Secondary</span>
    <span class="rd-xl badge-md ui-soft ui-soft-accent">Badge Accent</span>
    <span class="rd-xl badge-md ui-soft ui-soft-warning">Badge Warning</span>
    <span class="rd-xl badge-md ui-soft ui-soft-danger">Badge danger</span>
    <span class="rd-xl badge-md ui-soft ui-soft-info">Badge Info</span>
    <span class="rd-xl badge-md ui-soft ui-soft-success">Badge Success</span>
</div>

<div class="flex flex-wrap gap-4">
    <span class="rd-xl badge-md ui-outline ui-outline-gray">Badge Gray</span>
    <span class="rd-xl badge-md ui-outline ui-outline-neutral">Badge Neutral</span>
    <span class="rd-xl badge-md ui-outline ui-outline-primary">Badge Primary</span>
    <span class="rd-xl badge-md ui-outline ui-outline-secondary">Badge Secondary</span>
    <span class="rd-xl badge-md ui-outline ui-outline-accent">Badge Accent</span>
    <span class="rd-xl badge-md ui-outline ui-outline-warning">Badge Warning</span>
    <span class="rd-xl badge-md ui-outline ui-outline-danger">Badge danger</span>
    <span class="rd-xl badge-md ui-outline ui-outline-info">Badge Info</span>
    <span class="rd-xl badge-md ui-outline ui-outline-success">Badge Success</span>
</div>

<div class="flex flex-wrap gap-4">
    <span class="rd-xl badge-md ui-subtle ui-subtle ui-subtle-gray">Badge Gray</span>
    <span class="rd-xl badge-md ui-subtle ui-subtle-neutral">Badge Neutral</span>
    <span class="rd-xl badge-md ui-subtle ui-subtle-primary">Badge Primary</span>
    <span class="rd-xl badge-md ui-subtle ui-subtle-secondary">Badge Secondary</span>
    <span class="rd-xl badge-md ui-subtle ui-subtle-accent">Badge Accent</span>
    <span class="rd-xl badge-md ui-subtle ui-subtle-warning">Badge Warning</span>
    <span class="rd-xl badge-md ui-subtle ui-subtle-danger">Badge danger</span>
    <span class="rd-xl badge-md ui-subtle ui-subtle-info">Badge Info</span>
    <span class="rd-xl badge-md ui-subtle ui-subtle-success">Badge Success</span>
</div>

<div class="flex flex-wrap gap-4">
    <span class="rd-xl badge-md ui-soft ui-soft-success d-flex-items-center gap-x1">
        12%
        <span aria-hidden="true" class="flex i-ph-trend-up"></span>
    </span>
    <span class="rd-xl badge-md ui-soft ui-soft-danger d-flex-items-center gap-x1">
        50%
        <span aria-hidden="true" class="flex i-ph-trend-down"></span>
    </span>
    <span class="rd-xl badge-md ui-soft ui-soft-warning d-flex-items-center gap-x1">
        You're reaching out your limit
        <span aria-hidden="true" class="flex i-ph-warning"></span>
    </span>
</div>