Badges - Skeleton

Badge Badge

---
import { Heart as IconHeart } from 'lucide-react';
---

<div class="flex items-center gap-4">
  <!-- A simple icon badge -->
  <span class="badge-icon preset-filled">
    <IconHeart size={16} />
  </span>
  <!-- A standard badge -->
  <span class="badge preset-filled">Badge</span>
  <!-- A badge + icon -->
  <span class="badge preset-filled">
    <IconHeart size={16} />
    <span>Badge</span>
  </span>
</div>

Presets

Provides full support of Presets.

Badge Badge Badge

<div class="space-y-4">
  <div class="flex gap-4">
    <span class="badge preset-filled-primary-500">Badge</span>
    <span class="badge preset-tonal-primary">Badge</span>
    <span class="badge preset-outlined-primary-500">Badge</span>
  </div>
  <div class="flex gap-4">
    <span class="badge preset-filled-secondary-500">Badge</span>
    <span class="badge preset-tonal-secondary">Badge</span>
    <span class="badge preset-outlined-secondary-500">Badge</span>
  </div>
  <div class="flex gap-4">
    <span class="badge preset-filled-tertiary-500">Badge</span>
    <span class="badge preset-tonal-tertiary">Badge</span>
    <span class="badge preset-outlined-tertiary-500">Badge</span>
  </div>
  <div class="flex gap-4">
    <span class="badge preset-filled-success-500">Badge</span>
    <span class="badge preset-tonal-success">Badge</span>
    <span class="badge preset-outlined-success-500">Badge</span>
  </div>
  <div class="flex gap-4">
    <span class="badge preset-filled-warning-500">Badge</span>
    <span class="badge preset-tonal-warning">Badge</span>
    <span class="badge preset-outlined-warning-500">Badge</span>
  </div>
  <div class="flex gap-4">
    <span class="badge preset-filled-error-500">Badge</span>
    <span class="badge preset-tonal-error">Badge</span>
    <span class="badge preset-outlined-error-500">Badge</span>
  </div>
  <div class="flex gap-4">
    <span class="badge preset-filled-surface-500">Badge</span>
    <span class="badge preset-tonal-surface">Badge</span>
    <span class="badge preset-outlined-surface-500">Badge</span>
  </div>
</div>

Overlap

Use badge-icon to create overlapping numeric or icon badges.

---
const imgSrc =
  'https://images.unsplash.com/photo-1620122303020-87ec826cf70d?q=80&w=256&h=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
---

<div class="relative inline-block">
  <span class="badge-icon preset-filled-primary-500 absolute -right-0 -top-0 z-10">2</span>
  <img class="size-20 overflow-hidden rounded-full grayscale" src={imgSrc} alt="Avatar" />
</div>