Badge

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

BadgeBadgeBadgeBadgeBadgeBadge
 
<div class="flex gap-3">
  <span class="badge sz-sm variant-neutral">Badge</span>
  <span class="badge sz-sm variant-info">Badge</span>
  <span class="badge sz-sm variant-success">Badge</span>
  <span class="badge sz-sm variant-warning">Badge</span>
  <span class="badge sz-sm variant-danger">Badge</span>
  <span class="badge sz-sm variant-urgent">Badge</span>
</div>

Reference

Badge

The badge component have the following props

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

Sizes

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

Number

32 
<span class="badge sz-sm variant-urgent !px-1">32</span>