Badge
Badges are used to inform user of the status of specific data. Check out code for detail of usage.
Default
Primary
Secondary
Info
Success
Warning
Error
Dark
Light
<div
class="badge bg-slate-150 text-slate-800 dark:bg-navy-500 dark:text-navy-100"
>
Default
</div>
<div class="badge bg-primary text-white dark:bg-accent">Primary</div>
<div class="badge bg-secondary text-white">Secondary</div>
<div class="badge bg-info text-white">Info</div>
<div class="badge bg-success text-white">Success</div>
<div class="badge bg-warning text-white">Warning</div>
<div class="badge bg-error text-white">Error</div>
<div class="badge bg-navy-700 text-white dark:bg-navy-900">Dark</div>
<div class="badge bg-slate-150 text-slate-800">Light</div>
Rounded Badge
Badges can have a rounded shape. To do this, you should use the
rounded-full utility Check out
code for detail of usage.
Default
Primary
Secondary
Info
Success
Warning
Error
Dark
Light
<div
class="badge rounded-full bg-slate-150 text-slate-800 dark:bg-navy-500 dark:text-navy-100"
>
Default
</div>
<div class="badge rounded-full bg-primary text-white dark:bg-accent">
Primary
</div>
<div class="badge rounded-full bg-secondary text-white">Secondary</div>
<div class="badge rounded-full bg-info text-white">Info</div>
<div class="badge rounded-full bg-success text-white">Success</div>
<div class="badge rounded-full bg-warning text-white">Warning</div>
<div class="badge rounded-full bg-error text-white">Error</div>
<div class="badge rounded-full bg-navy-700 text-white dark:bg-navy-900">
Dark
</div>
<div class="badge rounded-full bg-slate-150 text-slate-800">Light</div>
Glow Badge
Badges can be glow. To do this, you should use colored shadows. Check out code for detail of usage.
Default
Primary
Secondary
Info
Success
Warning
Error
<div
class="badge bg-slate-150 text-slate-800 shadow-soft shadow-slate-200/50 dark:bg-navy-500 dark:text-navy-100 dark:shadow-navy-450/50"
>
Default
</div>
<div
class="badge bg-primary text-white shadow-soft shadow-primary/50 dark:bg-accent dark:shadow-accent/50"
>
Primary
</div>
<div class="badge bg-secondary text-white shadow-soft shadow-secondary/50">
Secondary
</div>
<div class="badge bg-info text-white shadow-soft shadow-info/50">Info</div>
<div class="badge bg-success text-white shadow-soft shadow-success/50">
Success
</div>
<div class="badge bg-warning text-white shadow-soft shadow-warning/50">
Warning
</div>
<div class="badge bg-error text-white shadow-soft shadow-error/50">Error</div>
Soft Color Badge
Badges can have a soft colors. To do this, you should use some opacity. Check out code for detail of usage.
Primary
Secondary
Info
Success
Warning
Error
<div
class="badge bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light"
>
Primary
</div>
<div
class="badge bg-secondary/10 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light"
>
Secondary
</div>
<div class="badge bg-info/10 text-info dark:bg-info/15">Info</div>
<div class="badge bg-success/10 text-success dark:bg-success/15">Success</div>
<div class="badge bg-warning/10 text-warning dark:bg-warning/15">Warning</div>
<div class="badge bg-error/10 text-error dark:bg-error/15">Error</div>
Outlined Badge
Badges can be outlied. Check out code for detail of usage.
Default
Primary
Secondary
Info
Success
Warning
Error
<div
class="badge rounded-full border border-slate-300 text-slate-800 dark:border-navy-450 dark:text-navy-50"
>
Default
</div>
<div
class="badge rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Primary
</div>
<div
class="badge rounded-full border border-secondary text-secondary dark:border-secondary-light dark:text-secondary-light"
>
Secondary
</div>
<div class="badge rounded-full border border-info text-info">Info</div>
<div class="badge rounded-full border border-success text-success">
Success
</div>
<div class="badge rounded-full border border-warning text-warning">
Warning
</div>
<div class="badge rounded-full border border-error text-error">Error</div>
Badge With Dots
Badges can be a dot attached to it. Check out code for detail of usage.
Default
Primary
Primary
Info
Success
Warning
Error
<div class="badge space-x-2.5 text-slate-800 dark:text-navy-100">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Default</span>
</div>
<div class="badge space-x-2.5 text-primary dark:text-accent-light">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Primary</span>
</div>
<div class="badge space-x-2.5 text-secondary dark:text-secondary-light">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Primary</span>
</div>
<div class="badge space-x-2.5 text-info">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Info</span>
</div>
<div class="badge space-x-2.5 text-success">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Success</span>
</div>
<div class="badge space-x-2.5 text-warning">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Warning</span>
</div>
<div class="badge space-x-2.5 text-error">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Error</span>
</div>
Badge With Dots
Badges can have a soft colors and a dot attached to it. Check out code for detail of usage.
Primary
Primary
Info
Success
Warning
Error
<div
class="badge space-x-2.5 rounded-full bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light"
>
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Primary</span>
</div>
<div
class="badge space-x-2.5 rounded-full bg-secondary/10 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light"
>
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Primary</span>
</div>
<div
class="badge space-x-2.5 rounded-full bg-info/10 text-info dark:bg-info/15"
>
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Info</span>
</div>
<div
class="badge space-x-2.5 rounded-full bg-success/10 text-success dark:bg-success/15"
>
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Success</span>
</div>
<div
class="badge space-x-2.5 rounded-full bg-warning/10 text-warning dark:bg-warning/15"
>
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Warning</span>
</div>
<div
class="badge space-x-2.5 rounded-full bg-error/10 text-error dark:bg-error/15"
>
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Error</span>
</div>
Badge With Icon
Badges can have an icon. Badges components work well with FontAwesome and Heroicon Icons. Check out code for detail of usage.
Default
Primary
Secondary
Warning
Remove
<div
class="badge space-x-2 bg-slate-150 text-slate-800 dark:bg-navy-500 dark:text-navy-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span>Default</span>
</div>
<div class="badge space-x-2 bg-primary text-white dark:bg-accent">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
></path>
</svg>
<span>Primary</span>
</div>
<div class="badge space-x-2 bg-secondary text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span>Secondary</span>
</div>
<div class="badge rounded-full bg-info text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M5.5 16a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 16h-8z"
></path>
</svg>
</div>
<div class="badge bg-success text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div
class="badge space-x-2 bg-warning text-white shadow-soft shadow-warning/50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clip-rule="evenodd"
/>
</svg>
<span>Warning</span>
</div>
<div class="badge space-x-2 bg-error text-white">
<span>Remove</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>