Class name Type
badge Component Container element
badge-outline Utility transparent badge with [colorful] border
badge-primary Utility badge with `primary` color
badge-secondary Utility badge with `secondary` color
badge-accent Utility badge with `accent` color
badge-ghost Utility badge with `ghost` color
badge-info Utility badge with `info` color
badge-success Utility badge with `success` color
badge-warning Utility badge with `warning` color
badge-error Utility badge with `error` color
badge-lg Utility badge with large size
badge-md Utility badge with medium size (default)
badge-sm Utility badge with small size
badge-xs Utility badge with extra small size
Examples
badge
Preview
HTML
neutral
primary
secondary
accent
ghost
badge size
Preview
HTML
987,654
987,654
987,654
987,654
empty badge
Preview
HTML
badge variants
Preview
HTML
info
success
warning
error
badge outline
Preview
HTML
neutral
primary
secondary
accent
Badge in text
Preview
HTML

Heading
New

Heading
New

Heading
New

Heading
New

Heading
New

badge in button
Preview
HTML