Badges

Usage

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

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

Badge Icon

A compact circular variation badge style.

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

Overlapping Icon

Use Tailwind utility classes to create overlapping elements.

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

Global Styles

Use your global stylesheet to update all instances of this element.

.badge { @apply rounded-full; }