General

Badge

Copy page

A small badge component used to display status information or labels.

Import

Code
 
import { Badge } from "zudoku/ui/Badge";

Variants

Default

Code
 
<Badge variant="default">Default</Badge>

Secondary

Code
 
<Badge variant="secondary">Secondary</Badge>

Muted

Code
 
<Badge variant="muted">Muted</Badge>

Destructive

Code
 
<Badge variant="destructive">Destructive</Badge>

Outline

Code
 
<Badge variant="outline">Outline</Badge>

Usage

Badges are perfect for showing status, categories, or counts:

Code
 
<Badge variant="default">New</Badge>
<Badge variant="secondary">Main</Badge>
<Badge variant="muted">10</Badge>