Badge

Use a badge to show the status of data.

Badge documentation

Class names

• component: badge
• style: badge-outline, badge-dash, badge-soft, badge-ghost
• color: badge-neutral, badge-primary, badge-secondary, badge-accent, badge-info, badge-success, badge-warning, badge-error
• size: badge-xs, badge-sm, badge-md, badge-lg, badge-xl

Syntax

<span class="badge {MODIFIER}">Badge</span>

Rules

• {MODIFIER} is optional. It can include one class name from each style, color, and size category.
• You can use a badge in text or buttons.
• To make an empty badge, remove the text between the span tags.