Badge

<div
  class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring rounded-full bg-primary text-primary-text hover:bg-primary/90"
>
  Badge
</div>

<div
  class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring rounded-full bg-primary text-primary-text hover:bg-primary/90"
>
  Primary
</div>
 
<!-- Primary -->
<div
  class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring rounded-full bg-secondary text-secondary-text hover:bg-secondary/90"
>
  Secondary
</div>
 
<!-- Secondary -->
<div
  class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring rounded-full bg-accent text-accent-text hover:bg-accent/80"
>
  Accent
</div>
 
<!-- Muted -->
<div
  class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring rounded-full bg-muted text-muted-text hover:bg-muted/80"
>
  Muted
</div>
 
<!-- Danger -->
<div
  class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring rounded-full bg-danger text-danger-filled-text hover:bg-danger/80"
>
  Danger
</div>

<!-- primary -->
<div
  class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring rounded-full hover:bg-primary hover:text-primary-text border border-primary text-primary"
>
  <p>Primary</p>
</div>
 
<!-- accent -->
<div
  class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring rounded-full hover:bg-accent hover:text-accent-text border border-accent text-accent-text"
>
  <p>Accent</p>
</div>
 
<!-- muted -->
<div
  class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring rounded-full hover:bg-muted hover:text-muted-text border border-muted text-muted-text"
>
  <p>Muted</p>
</div>
 
<!-- danger -->
<div
  class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring rounded-full hover:bg-danger hover:text-danger-filled-text border border-danger text-danger"
>
  <p>Danger</p>
</div>

<!-- Primary -->
<div
  class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring bg-transparent rounded-full hover:bg-primary hover:text-primary-text text-primary"
>
  <p>Primary</p>
</div>
 
<!-- Accent -->
<div
  class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring bg-transparent rounded-full hover:bg-accent text-accent-text"
>
  <p>Accent</p>
</div>
 
<!-- Muted -->
<div
  class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring bg-transparent rounded-full hover:bg-muted text-muted-text"
>
  <p>Muted</p>
</div>
 
<!-- Danger -->
<div
  class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring bg-transparent rounded-full hover:bg-danger hover:text-danger-filled-text text-danger"
>
  <p>Danger</p>
</div>