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

Filled

primary
secondary
tertiary
success
warning
error
surface

Soft

primary
secondary
tertiary
success
warning
error
surface

Ringed

primary
secondary
tertiary
success
warning
error
surface

Ghost

primary
secondary
tertiary
success
warning
error
surface

Glass

primary
secondary
tertiary
success
warning
error
surface

Getting Started

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

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

Badge Icon

A compact circular variation badge style.

html 
<span class="badge-icon variant-filled-primary">💀</span>

Variants

Variant styles are available via .variant-[style]-[color].

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

Overlapping Icon

Use Tailwind utility classes to create overlapping elements.

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