Zudoku
General

Badge

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

Import

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

Variants

Default

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

Secondary

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

Muted

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

Destructive

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

Outline

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

Usage

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

New
Main
10
tsxCode
<Badge variant="default">New</Badge> <Badge variant="secondary">Main</Badge> <Badge variant="muted">10</Badge>
Last modified on