Badges

Tailwind

Provides a robust set of badge styles

@skeletonlabs/skeleton
View Source
Doc Source

Examples

Skeleton
♥ Complete Skeleton 💀 ♥ Favorite

Skeleton

Sup

Skeleton

Sub
50k
2
AB
♥
AB

Usage

Apply to any inline element, such as a span or anchor tag.

html 
<span class="badge bg-primary-500">Skeleton</span>

Badge Icon

A compact circular variation badge style.

html 
<span class="badge-icon bg-primary-500">💀</span>

Overlapping Icon

Use Tailwind utility classes to create overlapping elements.

html 
<div class="relative inline-block">
    <span class="badge-icon bg-primary-500 absolute -top-1 -right-1 z-10">💀</span>
    <Avatar />
</div>