Badge
Badge Default
=
<div class="flex flex-wrap justify-center gap-2">
<span class="rounded-full bg-primary-50 px-2 py-1 text-xs font-semibold text-primary-600"> Badge </span>
<span class="rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600"> Badge </span>
<span class="rounded-full bg-yellow-50 px-2 py-1 text-xs font-semibold text-yellow-600"> Badge </span>
<span class="rounded-full bg-red-50 px-2 py-1 text-xs font-semibold text-red-600"> Badge </span>
<span class="rounded-full bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-600"> Badge </span>
<span class="rounded-full bg-black px-2 py-1 text-xs font-semibold text-white"> Badge </span>
</div>
Badge Large
=
<div class="flex flex-wrap justify-center gap-2">
<span class="rounded-full bg-primary-50 px-3 py-1 text-sm font-semibold text-primary-600"> Badge </span>
<span class="rounded-full bg-green-50 px-3 py-1 text-sm font-semibold text-green-600"> Badge </span>
<span class="rounded-full bg-yellow-50 px-3 py-1 text-sm font-semibold text-yellow-600"> Badge </span>
<span class="rounded-full bg-red-50 px-3 py-1 text-sm font-semibold text-red-600"> Badge </span>
<span class="rounded-full bg-gray-100 px-3 py-1 text-sm font-semibold text-gray-600"> Badge </span>
<span class="rounded-full bg-black px-3 py-1 text-sm font-semibold text-white"> Badge </span>
</div>
Badge Rounded
=
<div class="flex flex-wrap items-center justify-center gap-2">
<span class="rounded-md bg-primary-50 px-2 py-1 text-xs font-semibold text-primary-600"> Badge </span>
<span class="rounded-md bg-primary-50 px-3 py-1 text-sm font-semibold text-primary-600"> Badge </span>
</div>
Badge With icon
=
<div class="flex flex-wrap items-center justify-center gap-2">
<span class="inline-flex items-center gap-1 rounded-full bg-primary-50 px-2 py-1 text-xs font-semibold text-primary-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-1 rounded-full bg-primary-50 px-3 py-1 text-sm font-semibold text-primary-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-1 rounded-md bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-1 rounded-md bg-green-50 px-3 py-1 text-sm font-semibold text-green-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd" />
</svg>
Badge
</span>
</div>
Badge With close
=
<div class="flex flex-wrap items-center justify-center gap-2">
<span class="inline-flex items-center gap-1 rounded-full bg-primary-50 px-2 py-1 text-xs font-semibold text-primary-600">
Badge
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3 opacity-80">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</span>
<span class="inline-flex items-center gap-1 rounded-full bg-primary-50 px-3 py-1 text-sm font-semibold text-primary-600">
Badge
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4 opacity-80">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</span>
<span class="inline-flex items-center gap-1 rounded-md bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
Badge
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3 opacity-80">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</span>
<span class="inline-flex items-center gap-1 rounded-md bg-green-50 px-3 py-1 text-sm font-semibold text-green-600">
Badge
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4 opacity-80">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</span>
</div>
Showing 5 results