Class name Type
badge Component Container element
badge-outline Utility transparent badge with [colorful] border
badge-lg Responsive badge with large size
badge-md Responsive badge with medium size (default)
badge-sm Responsive badge with small size
badge-xs Responsive badge with extra small size
badge-primary Responsive badge with `primary` color
badge-secondary Responsive badge with `secondary` color
badge-accent Responsive badge with `accent` color
badge-ghost Responsive badge with `ghost` color
badge-info Responsive badge with `info` color
badge-success Responsive badge with `success` color
badge-warning Responsive badge with `warning` color
badge-error Responsive badge with `error` color
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