Badges

<x-badge color="primary">primary</x-badge>
<x-badge color="secondary">secondary</x-badge>
<x-badge color="accent">accent</x-badge>
<x-badge color="neutral">neutral</x-badge>
<x-badge color="info">info</x-badge>
<x-badge color="success">success</x-badge>
<x-badge color="warning">warning</x-badge>
<x-badge color="error">error</x-badge>

<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-primary/15 text-primary border-transparent">primary</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-secondary/15 text-secondary border-transparent">secondary</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-accent/15 text-accent border-transparent">accent</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-base-content/15 text-base-content border-transparent">neutral</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-info/15 text-info border-transparent">info</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-success/15 text-success border-transparent">success</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-warning/15 text-warning border-transparent">warning</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-error/15 text-error border-transparent">error</span>

<x-badge color="primary" appearance="outline">primary</x-badge>
<x-badge color="secondary" appearance="outline">secondary</x-badge>
<x-badge color="accent" appearance="outline">accent</x-badge>
<x-badge color="neutral" appearance="outline">neutral</x-badge>
<x-badge color="info" appearance="outline">info</x-badge>
<x-badge color="success" appearance="outline">success</x-badge>
<x-badge color="warning" appearance="outline">warning</x-badge>
<x-badge color="error" appearance="outline">error</x-badge>

<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-transparent text-primary border-primary">primary</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-transparent text-secondary border-secondary">secondary</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-transparent text-accent border-accent">accent</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-transparent text-base-content border-base-content/30">neutral</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-transparent text-info border-info">info</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-transparent text-success border-success">success</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-transparent text-warning border-warning">warning</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-transparent text-error border-error">error</span>

<x-badge color="primary" appearance="soft">primary</x-badge>
<x-badge color="secondary" appearance="soft">secondary</x-badge>
<x-badge color="accent" appearance="soft">accent</x-badge>
<x-badge color="neutral" appearance="soft">neutral</x-badge>
<x-badge color="info" appearance="soft">info</x-badge>
<x-badge color="success" appearance="soft">success</x-badge>
<x-badge color="warning" appearance="soft">warning</x-badge>
<x-badge color="error" appearance="soft">error</x-badge>

<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-primary/15 text-primary border-transparent">primary</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-secondary/15 text-secondary border-transparent">secondary</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-accent/15 text-accent border-transparent">accent</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-base-content/15 text-base-content border-transparent">neutral</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-info/15 text-info border-transparent">info</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-success/15 text-success border-transparent">success</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-warning/15 text-warning border-transparent">warning</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-error/15 text-error border-transparent">error</span>

<x-badge color="primary" appearance="base-200">primary</x-badge>
<x-badge color="accent" appearance="base-200">accent</x-badge>
<x-badge color="success" appearance="base-200">success</x-badge>
<x-badge color="warning" appearance="base-200">warning</x-badge>

<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-base-200 text-primary border-base-content/10">primary</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-base-200 text-accent border-base-content/10">accent</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-base-200 text-success border-base-content/10">success</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-base-200 text-warning border-base-content/10">warning</span>

<x-badge color="info" appearance="dot">info</x-badge>
<x-badge color="success" appearance="dot">success</x-badge>
<x-badge color="warning" appearance="dot">warning</x-badge>
<x-badge color="error" appearance="dot">error</x-badge>
<x-badge color="neutral" appearance="dot">neutral</x-badge>

<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-base-100 text-base-content border-base-300"><span class="w-1.5 h-1.5 rounded-full bg-info"></span> info</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-base-100 text-base-content border-base-300"><span class="w-1.5 h-1.5 rounded-full bg-success"></span> success</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-base-100 text-base-content border-base-300"><span class="w-1.5 h-1.5 rounded-full bg-warning"></span> warning</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-base-100 text-base-content border-base-300"><span class="w-1.5 h-1.5 rounded-full bg-error"></span> error</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-base-100 text-base-content border-base-300"><span class="w-1.5 h-1.5 rounded-full bg-base-content"></span> neutral</span>

<x-badge size="xs" color="primary">xs</x-badge>
<x-badge size="sm" color="primary">sm</x-badge>
<x-badge size="md" color="primary">md</x-badge>
<x-badge size="lg" color="primary">lg</x-badge>

<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-[0.625rem] leading-none px-1.5 py-0.5 gap-1 bg-primary/15 text-primary border-transparent">xs</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-0.5 gap-1 bg-primary/15 text-primary border-transparent">sm</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-primary/15 text-primary border-transparent">md</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-sm leading-none px-3 py-1 gap-1.5 bg-primary/15 text-primary border-transparent">lg</span>

<x-badge pill color="success">pill</x-badge>
<x-badge pill color="error" appearance="solid">pill solid</x-badge>
<x-badge icon="check-circle" color="success" appearance="soft">with icon</x-badge>
<x-badge icon="star" color="warning" appearance="outline">featured</x-badge>

<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-full text-xs leading-none px-2 py-1 gap-1 bg-success/15 text-success border-transparent">pill</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-full text-xs leading-none px-2 py-1 gap-1 bg-error text-error-content border-error">pill solid</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-success/15 text-success border-transparent"><svg class="w-[1em] h-[1em]" viewbox="0 0 24 24">
<path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".3"></path>
<path fill="currentColor" d="M16.03 8.97a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.235L14.97 8.97a.75.75 0 0 1 1.06 0"></path></svg> with icon</span>
<span class="inline-flex items-center font-medium tune-border whitespace-nowrap rounded-[var(--radius-selector)] text-xs leading-none px-2 py-1 gap-1 bg-transparent text-warning border-warning"><svg class="w-[1em] h-[1em]" viewbox="0 0 24 24">
<path fill="currentColor" d="M18.483 16.767A8.5 8.5 0 0 1 8.118 7.081a1 1 0 0 1-.113.097c-.28.213-.63.292-1.33.45l-.635.144c-2.46.557-3.69.835-3.983 1.776c-.292.94.546 1.921 2.223 3.882l.434.507c.476.557.715.836.822 1.18c.107.345.071.717-.001 1.46l-.066.677c-.253 2.617-.38 3.925.386 4.506s1.918.052 4.22-1.009l.597-.274c.654-.302.981-.452 1.328-.452s.674.15 1.329.452l.595.274c2.303 1.06 3.455 1.59 4.22 1.01c.767-.582.64-1.89.387-4.507z"></path>
<path fill="currentColor" d="m9.153 5.408l-.328.588c-.36.646-.54.969-.82 1.182q.06-.045.113-.097a8.5 8.5 0 0 0 10.366 9.686l-.02-.19c-.071-.743-.107-1.115 0-1.46c.107-.344.345-.623.822-1.18l.434-.507c1.677-1.96 2.515-2.941 2.222-3.882c-.292-.941-1.522-1.22-3.982-1.776l-.636-.144c-.699-.158-1.049-.237-1.33-.45c-.28-.213-.46-.536-.82-1.182l-.327-.588C13.58 3.136 12.947 2 12 2s-1.58 1.136-2.847 3.408" opacity=".3"></path></svg> featured</span>