Badges
TailwindProvides a robust set of non-interactive badge styles
Stylesheets
Package
Source
Doc
Examples
Skeleton
♥
Complete
Skeleton
💀
♥
Favorite
Skeleton
SupSkeleton
Sub50k
Usage
Apply to any inline element, such as a span or anchor tag.
<span class="badge badge-filled-primary">Skeleton</span>
Badge Icon
A compact circular variation badge style.
<span class="badge-icon badge-filled-primary">💀</span>
Variants
A set of canned preset styles are available using .badge-[variant]
. These are available for both badge and badge icons.
<span class="badge badge-filled-surface">Skeleton</span>
filled-surface
filled-primary
filled-accent
filled-tertiary
filled-warning
glass
Overlapping Icon
Use Tailwind utility classes to create overlapping elements.
<div class="relative inline-block">
<span class="badge-icon badge-filled-primary absolute -top-1 -right-1 z-10">💀</span>
<Avatar />
</div>