Tailwind

Badges

Provides a robust set of non-interactive badge styles.

Source Page Source
2
AB
AB
50k

Skeleton

Sup

Skeleton

Sub

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>