<!-- Primary -->
<span
    class="inline-flex items-center justify-center h-8 bg-primary/10 border border-primary/20 rounded-full text-primary cursor-default select-none outline-hidden px-6">
    <span class="font-semibold text-xs">اصلی</span>
</span>

<!-- Accent -->
<span
    class="inline-flex items-center justify-center h-8 bg-accent/10 border border-accent/20 rounded-full text-accent cursor-default select-none outline-hidden px-6">
    <span class="font-semibold text-xs">تأکیدی</span>
</span>

<!-- Info -->
<span
    class="inline-flex items-center justify-center h-8 bg-info/10 border border-info/20 rounded-full text-info cursor-default select-none outline-hidden px-6">
    <span class="font-semibold text-xs">اطلاعاتی</span>
</span>

<!-- Success -->
<span
    class="inline-flex items-center justify-center h-8 bg-success/10 border border-success/20 rounded-full text-success cursor-default select-none outline-hidden px-6">
    <span class="font-semibold text-xs">موفقیت</span>
</span>

<!-- Warning -->
<span
    class="inline-flex items-center justify-center h-8 bg-warning/10 border border-warning/20 rounded-full text-warning cursor-default select-none outline-hidden px-6">
    <span class="font-semibold text-xs">هشدار</span>
</span>

<!-- Destructive -->
<span
    class="inline-flex items-center justify-center h-8 bg-destructive/10 border border-destructive/20 rounded-full text-destructive cursor-default select-none outline-hidden px-6">
    <span class="font-semibold text-xs">خطرناک</span>
</span>

<!-- Foreground -->
<span
    class="inline-flex items-center justify-center h-8 bg-foreground/10 border border-foreground/20 rounded-full text-foreground cursor-default select-none outline-hidden px-6">
    <span class="font-semibold text-xs">معکوس</span>
</span>

<!-- Muted -->
<span
    class="inline-flex items-center justify-center h-8 bg-muted-foreground/10 border border-muted-foreground/20 rounded-full text-muted-foreground cursor-pointer select-none outline-hidden px-6">
    <span class="font-semibold text-xs">ثانویه</span>
</span>

<!-- Primary -->
<span
    class="inline-flex items-center justify-center gap-x-2.5 h-8 text-primary cursor-default select-none outline-hidden">
    <span class="shrink-0 size-1.5 bg-primary rounded-full ring-2 ring-primary/25"></span>
    <span class="font-semibold text-xs">اصلی</span>
</span>

<!-- Accent -->
<span
    class="inline-flex items-center justify-center gap-x-2.5 h-8 text-accent cursor-default select-none outline-hidden">
    <span class="shrink-0 size-1.5 bg-accent rounded-full ring-2 ring-accent/25"></span>
    <span class="font-semibold text-xs">تأکیدی</span>
</span>

<!-- Info -->
<span class="inline-flex items-center justify-center gap-x-2.5 h-8 text-info cursor-default select-none outline-hidden">
    <span class="shrink-0 size-1.5 bg-info rounded-full ring-2 ring-info/25"></span>
    <span class="font-semibold text-xs">اطلاعاتی</span>
</span>

<!-- Success -->
<span
    class="inline-flex items-center justify-center gap-x-2.5 h-8 text-success cursor-default select-none outline-hidden">
    <span class="shrink-0 size-1.5 bg-success rounded-full ring-2 ring-success/25"></span>
    <span class="font-semibold text-xs">موفقیت</span>
</span>

<!-- Warning -->
<span
    class="inline-flex items-center justify-center gap-x-2.5 h-8 text-warning cursor-default select-none outline-hidden">
    <span class="shrink-0 size-1.5 bg-warning rounded-full ring-2 ring-warning/25"></span>
    <span class="font-semibold text-xs">هشدار</span>
</span>

<!-- Destructive -->
<span
    class="inline-flex items-center justify-center gap-x-2.5 h-8 text-destructive cursor-default select-none outline-hidden">
    <span class="shrink-0 size-1.5 bg-destructive rounded-full ring-2 ring-destructive/25"></span>
    <span class="font-semibold text-xs">خطرناک</span>
</span>

<!-- Foreground -->
<span
    class="inline-flex items-center justify-center gap-x-2.5 h-8 text-foreground cursor-default select-none outline-hidden">
    <span class="shrink-0 size-1.5 bg-foreground rounded-full ring-2 ring-foreground/25"></span>
    <span class="font-semibold text-xs">معکوس</span>
</span>

<!-- Muted -->
<span
    class="inline-flex items-center justify-center gap-x-2.5 h-8 text-muted-foreground cursor-default select-none outline-hidden">
    <span class="shrink-0 size-1.5 bg-muted-foreground rounded-full ring-2 ring-muted-foreground/25"></span>
    <span class="font-semibold text-xs">ثانویه</span>
</span>