Badges

Tailwind

Provides a robust set of non-interactive badge styles.

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

50k
2
AB
AB

Skeleton

Sup

Skeleton

Sub

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

Supports all standard variant styles via .variant-[style]-[color].

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

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

Overlapping

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>