A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design.
<div class="flex flex-wrap gap-2.5">
<span class="kt-badge">Default</span
><span class="kt-badge kt-badge-stroke">Stroke</span>
</div>
<div class="flex flex-wrap gap-2.5">
<span class="kt-badge kt-badge-primary">Primary</span
><span class="kt-badge kt-badge-secondary">Secondary</span
><span class="kt-badge kt-badge-destructive">Destructive</span
><span class="kt-badge kt-badge-warning">Warning</span
><span class="kt-badge kt-badge-success">Success</span
><span class="kt-badge kt-badge-info">Info</span
><span class="kt-badge kt-badge-mono">Mono</span>
</div>
<div class="flex flex-wrap gap-2.5">
<span class="kt-badge kt-badge-outline kt-badge-primary">Primary</span
><span class="kt-badge kt-badge-outline kt-badge-secondary">Secondary</span
><span class="kt-badge kt-badge-outline kt-badge-destructive"
>Destructive</span
><span class="kt-badge kt-badge-outline kt-badge-warning">Warning</span
><span class="kt-badge kt-badge-outline kt-badge-success">Success</span
><span class="kt-badge kt-badge-outline kt-badge-info">Info</span
><span class="kt-badge kt-badge-outline kt-badge-mono">Mono</span>
</div>
<div class="flex flex-wrap gap-2.5">
<span class="kt-badge kt-badge-light kt-badge-primary">Primary</span
><span class="kt-badge kt-badge-light kt-badge-secondary">Secondary</span
><span class="kt-badge kt-badge-light kt-badge-destructive">Destructive</span
><span class="kt-badge kt-badge-light kt-badge-warning">Warning</span
><span class="kt-badge kt-badge-light kt-badge-success">Success</span
><span class="kt-badge kt-badge-light kt-badge-info">Info</span
><span class="kt-badge kt-badge-light kt-badge-mono">Mono</span>
</div>
<div class="flex flex-wrap gap-2.5">
<span class="kt-badge kt-badge-outline kt-badge-primary rounded-full"
>Primary</span
><span class="kt-badge kt-badge-outline kt-badge-secondary rounded-full"
>Secondary</span
><span class="kt-badge kt-badge-outline kt-badge-destructive rounded-full"
>Destructive</span
><span class="kt-badge kt-badge-outline kt-badge-warning rounded-full"
>Warning</span
><span class="kt-badge kt-badge-outline kt-badge-success rounded-full"
>Success</span
><span class="kt-badge kt-badge-outline kt-badge-info rounded-full">Info</span
><span class="kt-badge kt-badge-outline kt-badge-mono rounded-full"
>Mono</span
>
</div>
<div class="space-y-4">
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-secondary rounded-full"
>1</span
><span class="kt-badge kt-badge-secondary rounded-full">1</span
><span class="kt-badge kt-badge-outline kt-badge-secondary rounded-full"
>1</span
><span class="kt-badge kt-badge-light kt-badge-secondary rounded-full"
>1</span
>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-primary rounded-full">2</span
><span class="kt-badge kt-badge-primary rounded-full">2</span
><span class="kt-badge kt-badge-outline kt-badge-primary rounded-full"
>2</span
><span class="kt-badge kt-badge-light kt-badge-primary rounded-full"
>2</span
>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-destructive rounded-full"
>3</span
><span class="kt-badge kt-badge-destructive rounded-full">3</span
><span class="kt-badge kt-badge-outline kt-badge-destructive rounded-full"
>3</span
><span class="kt-badge kt-badge-light kt-badge-destructive rounded-full"
>3</span
>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-warning rounded-full">4</span
><span class="kt-badge kt-badge-warning rounded-full">4</span
><span class="kt-badge kt-badge-outline kt-badge-warning rounded-full"
>4</span
><span class="kt-badge kt-badge-light kt-badge-warning rounded-full"
>4</span
>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-success rounded-full">5</span
><span class="kt-badge kt-badge-success rounded-full">5</span
><span class="kt-badge kt-badge-outline kt-badge-success rounded-full"
>5</span
><span class="kt-badge kt-badge-light kt-badge-success rounded-full"
>5</span
>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-info rounded-full">6</span
><span class="kt-badge kt-badge-info rounded-full">6</span
><span class="kt-badge kt-badge-outline kt-badge-info rounded-full">6</span
><span class="kt-badge kt-badge-light kt-badge-info rounded-full">6</span>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-mono rounded-full">7</span
><span class="kt-badge kt-badge-mono rounded-full">7</span
><span class="kt-badge kt-badge-outline kt-badge-mono rounded-full">7</span
><span class="kt-badge kt-badge-light kt-badge-mono rounded-full">7</span>
</div>
</div>
<div class="space-y-4">
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-secondary"
><span class="kt-badge-dot"></span> Ghost</span
><span class="kt-badge kt-badge-secondary"
><span class="kt-badge-dot"></span> Solid</span
><span class="kt-badge kt-badge-outline kt-badge-secondary"
><span class="kt-badge-dot"></span> Outline</span
><span class="kt-badge kt-badge-light kt-badge-secondary"
><span class="kt-badge-dot"></span> Light</span
>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-primary"
><span class="kt-badge-dot"></span> Ghost</span
><span class="kt-badge kt-badge-primary"
><span class="kt-badge-dot"></span> Solid</span
><span class="kt-badge kt-badge-outline kt-badge-primary"
><span class="kt-badge-dot"></span> Outline</span
><span class="kt-badge kt-badge-light kt-badge-primary"
><span class="kt-badge-dot"></span> Light</span
>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-destructive"
><span class="kt-badge-dot"></span> Ghost</span
><span class="kt-badge kt-badge-destructive"
><span class="kt-badge-dot"></span> Solid</span
><span class="kt-badge kt-badge-outline kt-badge-destructive"
><span class="kt-badge-dot"></span> Outline</span
><span class="kt-badge kt-badge-light kt-badge-destructive"
><span class="kt-badge-dot"></span> Light</span
>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-warning"
><span class="kt-badge-dot"></span> Ghost</span
><span class="kt-badge kt-badge-warning"
><span class="kt-badge-dot"></span> Solid</span
><span class="kt-badge kt-badge-outline kt-badge-warning"
><span class="kt-badge-dot"></span> Outline</span
><span class="kt-badge kt-badge-light kt-badge-warning"
><span class="kt-badge-dot"></span> Light</span
>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-success"
><span class="kt-badge-dot"></span> Ghost</span
><span class="kt-badge kt-badge-success"
><span class="kt-badge-dot"></span> Solid</span
><span class="kt-badge kt-badge-outline kt-badge-success"
><span class="kt-badge-dot"></span> Outline</span
><span class="kt-badge kt-badge-light kt-badge-success"
><span class="kt-badge-dot"></span> Light</span
>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-info"
><span class="kt-badge-dot"></span> Ghost</span
><span class="kt-badge kt-badge-info"
><span class="kt-badge-dot"></span> Solid</span
><span class="kt-badge kt-badge-outline kt-badge-info"
><span class="kt-badge-dot"></span> Outline</span
><span class="kt-badge kt-badge-light kt-badge-info"
><span class="kt-badge-dot"></span> Light</span
>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-mono"
><span class="kt-badge-dot"></span> Ghost</span
><span class="kt-badge kt-badge-mono"
><span class="kt-badge-dot"></span> Solid</span
><span class="kt-badge kt-badge-outline kt-badge-mono"
><span class="kt-badge-dot"></span> Outline</span
><span class="kt-badge kt-badge-light kt-badge-mono"
><span class="kt-badge-dot"></span> Light</span
>
</div>
</div>
<div class="space-y-4">
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-secondary"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-tag"
aria-hidden="true"
>
<path
d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"
></path>
<circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>
</svg>
Ghost</span
><span class="kt-badge kt-badge-secondary"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-mail"
aria-hidden="true"
>
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
<rect x="2" y="4" width="20" height="16" rx="2"></rect>
</svg>
Solid</span
><span class="kt-badge kt-badge-outline kt-badge-secondary"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-file-plus"
aria-hidden="true"
>
<path
d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
<path d="M9 15h6"></path>
<path d="M12 18v-6"></path>
</svg>
Outline</span
><span class="kt-badge kt-badge-light kt-badge-secondary"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-activity"
aria-hidden="true"
>
<path
d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
></path>
</svg>
Light</span
>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-destructive"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-tag"
aria-hidden="true"
>
<path
d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"
></path>
<circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>
</svg>
Ghost</span
><span class="kt-badge kt-badge-destructive"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-mail"
aria-hidden="true"
>
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
<rect x="2" y="4" width="20" height="16" rx="2"></rect>
</svg>
Solid</span
><span class="kt-badge kt-badge-outline kt-badge-destructive"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-file-plus"
aria-hidden="true"
>
<path
d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
<path d="M9 15h6"></path>
<path d="M12 18v-6"></path>
</svg>
Outline</span
><span class="kt-badge kt-badge-light kt-badge-destructive"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-activity"
aria-hidden="true"
>
<path
d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
></path>
</svg>
Light</span
>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-warning"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-tag"
aria-hidden="true"
>
<path
d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"
></path>
<circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>
</svg>
Ghost</span
><span class="kt-badge kt-badge-warning"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-mail"
aria-hidden="true"
>
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
<rect x="2" y="4" width="20" height="16" rx="2"></rect>
</svg>
Solid</span
><span class="kt-badge kt-badge-outline kt-badge-warning"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-file-plus"
aria-hidden="true"
>
<path
d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
<path d="M9 15h6"></path>
<path d="M12 18v-6"></path>
</svg>
Outline</span
><span class="kt-badge kt-badge-light kt-badge-warning"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-activity"
aria-hidden="true"
>
<path
d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
></path>
</svg>
Light</span
>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-success"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-tag"
aria-hidden="true"
>
<path
d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"
></path>
<circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>
</svg>
Ghost</span
><span class="kt-badge kt-badge-success"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-mail"
aria-hidden="true"
>
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
<rect x="2" y="4" width="20" height="16" rx="2"></rect>
</svg>
Solid</span
><span class="kt-badge kt-badge-outline kt-badge-success"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-file-plus"
aria-hidden="true"
>
<path
d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
<path d="M9 15h6"></path>
<path d="M12 18v-6"></path>
</svg>
Outline</span
><span class="kt-badge kt-badge-light kt-badge-success"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-activity"
aria-hidden="true"
>
<path
d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
></path>
</svg>
Light</span
>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-info"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-tag"
aria-hidden="true"
>
<path
d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"
></path>
<circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>
</svg>
Ghost</span
><span class="kt-badge kt-badge-info"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-mail"
aria-hidden="true"
>
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
<rect x="2" y="4" width="20" height="16" rx="2"></rect>
</svg>
Solid</span
><span class="kt-badge kt-badge-outline kt-badge-info"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-file-plus"
aria-hidden="true"
>
<path
d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
<path d="M9 15h6"></path>
<path d="M12 18v-6"></path>
</svg>
Outline</span
><span class="kt-badge kt-badge-light kt-badge-info"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-activity"
aria-hidden="true"
>
<path
d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
></path>
</svg>
Light</span
>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-mono"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-tag"
aria-hidden="true"
>
<path
d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"
></path>
<circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>
</svg>
Ghost</span
><span class="kt-badge kt-badge-mono"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-mail"
aria-hidden="true"
>
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
<rect x="2" y="4" width="20" height="16" rx="2"></rect>
</svg>
Solid</span
><span class="kt-badge kt-badge-outline kt-badge-mono"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-file-plus"
aria-hidden="true"
>
<path
d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
<path d="M9 15h6"></path>
<path d="M12 18v-6"></path>
</svg>
Outline</span
><span class="kt-badge kt-badge-light kt-badge-mono"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-activity"
aria-hidden="true"
>
<path
d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
></path>
</svg>
Light</span
>
</div>
</div>
<div class="space-y-4">
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-primary"
>Ghost<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-primary"
>Solid<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-outline kt-badge-primary"
>Outline<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-light kt-badge-primary"
>Light<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button
></span>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-secondary"
>Ghost<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-secondary"
>Solid<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-outline kt-badge-secondary"
>Outline<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-light kt-badge-secondary"
>Light<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button
></span>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-destructive"
>Ghost<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-destructive"
>Solid<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-outline kt-badge-destructive"
>Outline<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-light kt-badge-destructive"
>Light<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button
></span>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-warning"
>Ghost<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-warning"
>Solid<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-outline kt-badge-warning"
>Outline<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-light kt-badge-warning"
>Light<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button
></span>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-success"
>Ghost<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-success"
>Solid<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-outline kt-badge-success"
>Outline<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-light kt-badge-success"
>Light<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button
></span>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-info"
>Ghost<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-info"
>Solid<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-outline kt-badge-info"
>Outline<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-light kt-badge-info"
>Light<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button
></span>
</div>
<div class="flex gap-4">
<span class="kt-badge kt-badge-ghost kt-badge-mono"
>Ghost<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-mono"
>Solid<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-outline kt-badge-mono"
>Outline<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button></span
><span class="kt-badge kt-badge-light kt-badge-mono"
>Light<!-- -->
<button class="kt-badge-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-x"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg></button
></span>
</div>
</div>
<div class="space-y-4">
<div class="flex flex-wrap items-center gap-4">
<span
class="kt-badge kt-badge-xs kt-badge-outline kt-badge-primary rounded-full"
>Extra small</span
><span
class="kt-badge kt-badge-sm kt-badge-outline kt-badge-primary rounded-full"
>Small</span
><span class="kt-badge kt-badge-outline kt-badge-primary rounded-full"
>Default</span
><span
class="kt-badge kt-badge-lg kt-badge-outline kt-badge-primary rounded-full"
>Large</span
>
</div>
<div class="flex flex-wrap items-center gap-4">
<span
class="kt-badge kt-badge-xs kt-badge-outline kt-badge-secondary rounded-full"
>Extra small</span
><span
class="kt-badge kt-badge-sm kt-badge-outline kt-badge-secondary rounded-full"
>Small</span
><span class="kt-badge kt-badge-outline kt-badge-secondary rounded-full"
>Default</span
><span
class="kt-badge kt-badge-lg kt-badge-outline kt-badge-secondary rounded-full"
>Large</span
>
</div>
<div class="flex flex-wrap items-center gap-4">
<span
class="kt-badge kt-badge-xs kt-badge-outline kt-badge-destructive rounded-full"
>Extra small</span
><span
class="kt-badge kt-badge-sm kt-badge-outline kt-badge-destructive rounded-full"
>Small</span
><span class="kt-badge kt-badge-outline kt-badge-destructive rounded-full"
>Default</span
><span
class="kt-badge kt-badge-lg kt-badge-outline kt-badge-destructive rounded-full"
>Large</span
>
</div>
<div class="flex flex-wrap items-center gap-4">
<span
class="kt-badge kt-badge-xs kt-badge-outline kt-badge-warning rounded-full"
>Extra small</span
><span
class="kt-badge kt-badge-sm kt-badge-outline kt-badge-warning rounded-full"
>Small</span
><span class="kt-badge kt-badge-outline kt-badge-warning rounded-full"
>Default</span
><span
class="kt-badge kt-badge-lg kt-badge-outline kt-badge-warning rounded-full"
>Large</span
>
</div>
<div class="flex flex-wrap items-center gap-4">
<span
class="kt-badge kt-badge-xs kt-badge-outline kt-badge-success rounded-full"
>Extra small</span
><span
class="kt-badge kt-badge-sm kt-badge-outline kt-badge-success rounded-full"
>Small</span
><span class="kt-badge kt-badge-outline kt-badge-success rounded-full"
>Default</span
><span
class="kt-badge kt-badge-lg kt-badge-outline kt-badge-success rounded-full"
>Large</span
>
</div>
<div class="flex flex-wrap items-center gap-4">
<span
class="kt-badge kt-badge-xs kt-badge-outline kt-badge-info rounded-full"
>Extra small</span
><span
class="kt-badge kt-badge-sm kt-badge-outline kt-badge-info rounded-full"
>Small</span
><span class="kt-badge kt-badge-outline kt-badge-info rounded-full"
>Default</span
><span
class="kt-badge kt-badge-lg kt-badge-outline kt-badge-info rounded-full"
>Large</span
>
</div>
<div class="flex flex-wrap items-center gap-4">
<span
class="kt-badge kt-badge-xs kt-badge-outline kt-badge-mono rounded-full"
>Extra small</span
><span
class="kt-badge kt-badge-sm kt-badge-outline kt-badge-mono rounded-full"
>Small</span
><span class="kt-badge kt-badge-outline kt-badge-mono rounded-full"
>Default</span
><span
class="kt-badge kt-badge-lg kt-badge-outline kt-badge-mono rounded-full"
>Large</span
>
</div>
</div>