Tailwind CSS Badge Components
None
Default badge
html
Badge
<span class="badge">Badge</span>
Badge sizes
html
Xsmall
Small
Medium
Large
Xlarge
<div class="badge badge-xs">Xsmall</div>
<div class="badge badge-sm">Small</div>
<div class="badge badge-md">Medium</div>
<div class="badge badge-lg">Large</div>
<div class="badge badge-xl">Xlarge</div>
Badge colors
html
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
<div class="badge">Default</div>
<div class="badge badge-primary">Primary</div>
<div class="badge badge-secondary">Secondary</div>
<div class="badge badge-accent">Accent</div>
<div class="badge badge-info">Info</div>
<div class="badge badge-success">Success</div>
<div class="badge badge-warning">Warning</div>
<div class="badge badge-error">Error</div>
<div class="badge badge-neutral">Neutral</div>
Soft Badge
html
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
<div class="badge badge-soft">Default</div>
<div class="badge badge-soft badge-primary">Primary</div>
<div class="badge badge-soft badge-secondary">Secondary</div>
<div class="badge badge-soft badge-accent">Accent</div>
<div class="badge badge-soft badge-info">Info</div>
<div class="badge badge-soft badge-success">Success</div>
<div class="badge badge-soft badge-warning">Warning</div>
<div class="badge badge-soft badge-error">Error</div>
<div class="badge badge-soft badge-neutral">Neutral</div>
Outline badge
html
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
<div class="badge badge-outline">Default</div>
<div class="badge badge-outline badge-primary">Primary</div>
<div class="badge badge-outline badge-secondary">Secondary</div>
<div class="badge badge-outline badge-accent">Accent</div>
<div class="badge badge-outline badge-info">Info</div>
<div class="badge badge-outline badge-success">Success</div>
<div class="badge badge-outline badge-warning">Warning</div>
<div class="badge badge-outline badge-error">Error</div>
<div class="badge badge-outline badge-neutral">Neutral</div>
Dashed badge
html
Defualt
Primary
Secondary
Accent
Info
Success
Warning
Error
Error
Neutral
<div class="badge badge-dashed">Defualt</div>
<div class="badge badge-dashed badge-primary">Primary</div>
<div class="badge badge-dashed badge-secondary">Secondary</div>
<div class="badge badge-dashed badge-accent">Accent</div>
<div class="badge badge-dashed badge-info">Info</div>
<div class="badge badge-dashed badge-success">Success</div>
<div class="badge badge-dashed badge-warning">Warning</div>
<div class="badge badge-dashed badge-error">Error</div>
<div class="badge badge-dashed badge-neutral">Error</div>
<div class="badge badge-dashed badge-neutral">Neutral</div>
Ghost badge
html
ghost
<div class="badge badge-ghost">ghost</div>
Empty badge
html
<div class="badge badge-primary badge-circle badge-lg"></div>
<div class="badge badge-primary badge-lg"></div>
<div class="badge badge-primary badge-md"></div>
<div class="badge badge-primary badge-sm"></div>
<div class="badge badge-primary badge-xs"></div>
Badge with icon
html
Info
Success
Warning
Error
<div class="badge badge-info">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
Info
</div>
<div class="badge badge-success">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="m9 12 2 2 4-4"></path>
</svg>
Success
</div>
<div class="badge badge-warning">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
<path d="M12 9v4"></path>
<path d="M12 17h.01"></path>
</svg>
Warning
</div>
<div class="badge badge-error">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="m4.9 4.9 14.2 14.2"></path>
</svg>
Error
</div>
Badge in a button
html
<button class="btn btn-primary btn-sm btn-active">
Message
<div class="badge badge-primary badge-xs">+49</div>
</button>
<button class="btn btn-sm">
Inbox
<span class="badge badge-xs badge-primary">+27</span>
</button>
Badge square
html
99+
<span class="badge badge-neutral badge-square">99+</span>