Copy page

General

Badge

Applies to

Developer Portalthe documentation site for your API consumers

Hosting

Managed EdgeManaged DedicatedSelf-Hosted

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

Import

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

Variants

Default

Default

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

Secondary

Secondary

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

Muted

Muted

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

Destructive

Destructive

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

Outline

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>