Badge

A small component typically used to display status information or additional context for another UI element.

BadgeBadgeBadge
 
<div class="flex gap-3">
    <span class="badge sz-md variant-solid intent-primary">Badge</span>
    <span class="badge sz-sm variant-soft intent-primary">Badge</span>
    <span class="badge sz-sm variant-outlined intent-primary">Badge</span>
</div>

Reference

Badge

The badge component have the following props

Prop
Type
Usage
size
enum
sz-[size]
variant
enum
variant-[variant]
intent
enum
intent-[intent]

Sizes example

BadgeBadgeBadgeBadge
 
<div class="flex items-end gap-3">
    <span class="badge sz-xs variant-solid intent-primary">Badge</span>
    <span class="badge sz-sm variant-solid intent-primary">Badge</span>
    <span class="badge sz-md variant-solid intent-primary">Badge</span>
    <span class="badge sz-lg variant-solid intent-primary">Badge</span>
</div>

Intents example

SolidBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge
SoftBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge
OutlinedBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge
 
<div class="w-fit grid grid-cols-3 gap-6">
    <div class="space-y-4">
        <span class="text-caption text-sm">Solid</span>
        <span class="badge sz-sm variant-solid intent-primary">Badge</span>
        <span class="badge sz-sm variant-solid intent-secondary">Badge</span>
        <span class="badge sz-sm variant-solid intent-accent">Badge</span>
        <span class="badge sz-sm variant-solid intent-info">Badge</span>
        <span class="badge sz-sm variant-solid intent-danger">Badge</span>
        <span class="badge sz-sm variant-solid intent-success">Badge</span>
        <span class="badge sz-sm variant-solid intent-info">Badge</span>
        <span class="badge sz-sm variant-solid intent-warning">Badge</span>
        <span class="badge sz-sm variant-solid intent-gray">Badge</span>
    </div>
    <div class="space-y-4">
        <span class="text-caption text-sm">Soft</span>
        <span class="badge sz-sm variant-soft intent-primary">Badge</span>
        <span class="badge sz-sm variant-soft intent-secondary">Badge</span>
        <span class="badge sz-sm variant-soft intent-accent">Badge</span>
        <span class="badge sz-sm variant-soft intent-info">Badge</span>
        <span class="badge sz-sm variant-soft intent-danger">Badge</span>
        <span class="badge sz-sm variant-soft intent-success">Badge</span>
        <span class="badge sz-sm variant-soft intent-info">Badge</span>
        <span class="badge sz-sm variant-soft intent-warning">Badge</span>
        <span class="badge sz-sm variant-soft intent-gray">Badge</span>
    </div>
    <div class="space-y-4">
        <span class="text-caption text-sm">Outlined</span>
        <span class="badge sz-sm variant-outlined intent-primary">Badge</span>
        <span class="badge sz-sm variant-outlined intent-secondary">Badge</span>
        <span class="badge sz-sm variant-outlined intent-accent">Badge</span>
        <span class="badge sz-sm variant-outlined intent-info">Badge</span>
        <span class="badge sz-sm variant-outlined intent-danger">Badge</span>
        <span class="badge sz-sm variant-outlined intent-success">Badge</span>
        <span class="badge sz-sm variant-outlined intent-info">Badge</span>
        <span class="badge sz-sm variant-outlined intent-warning">Badge</span>
        <span class="badge sz-sm variant-outlined intent-gray">Badge</span>
    </div>
</div>