Shadix

Badge

A small status label rendered as a pill, styled with the shadcn variant system.

Badge
<.badge>Badge</.badge>

Examples

Variants

The four built-in variants.

Default Secondary Destructive Outline
<div class="flex flex-wrap gap-2">
  <.badge variant="default">Default</.badge>
  <.badge variant="secondary">Secondary</.badge>
  <.badge variant="destructive">Destructive</.badge>
  <.badge variant="outline">Outline</.badge>
</div>

Props

Name Type Default Values
class :string
rest :global
variant :string "default" default | secondary | destructive | outline
inner_block (slot) :slot