Badges

Tailwind

Provides a robust set of non-interactive badge styles

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

Skeleton
Complete Skeleton Favorite

Skeleton

Sup

Skeleton

Sub
50k
2
AB
AB

Getting Started

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

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

Badge Icon

A compact circular variation badge style.

html 
<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.

html 
<span class="badge badge-filled-surface">Skeleton</span>
filled-surface filled-primary filled-secondary filled-tertiary glass filled-success filled-warning filled-error

Overlapping Icon

Use Tailwind utility classes to create overlapping elements.

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