Badges
A standard badge
<span class="badge-color-slate-500">100</span>Badge collection
<div class="flex gap-2">
<span class="badge-color-slate-500">100</span>
<span class="badge-color-slate-500">200</span>
<span class="badge-color-slate-500">300</span>
<span class="badge-color-slate-500">400</span>
</div>Badge pills
<div class="flex gap-2">
<span class="badge-color-slate-500 badge-pill">Mega Audit Settings</span>
<span class="badge-color-slate-500 badge-pill">200</span>
<span class="badge-color-slate-500 badge-pill">300</span>
<span class="badge-color-slate-500 badge-pill">400</span>
</div>Badge circles
<div class=" gap-2">
<span class="badge-color-slate-500 badge-pill aspect-ratio-square">10</span>
<span class="badge-color-slate-500 badge-pill aspect-ratio-square">20</span>
<span class="badge-color-slate-500 badge-pill aspect-ratio-square">30</span>
<span class="badge-color-slate-500 badge-pill aspect-ratio-square">999</span>
</div>Badge inside buttons collection
<div class="flex gap-2">
<button class="btn-color-action">Mega Audit Settings <span class="badge-color-black/30">100</span></button>
<button class="btn-color-red-500">A <span class="badge-color-black/30">200</span></button>
<button class="btn-color-primary">Testing thing <span class="badge-color-black/30">300</span></button>
<button class="btn-color-orange">Broken <span class="badge-color-black/30">300</span></button>
<button class="btn-color-indigo-600">Indigo Button <span class="badge-color-black/30">300</span></button>
</div>Badge inside buttons collection
<div class="flex gap-2">
<button class="btn-color-action btn-size-sm">Mega Audit Settings <span class="badge-color-black/30">100</span></button>
<button class="btn-color-red-500 btn-size-sm">A <span class="badge-color-black/30">200</span></button>
<button class="btn-color-primary btn-size-sm">Testing thing <span class="badge-color-black/30">300</span></button>
<button class="btn-color-orange btn-size-sm">Broken <span class="badge-color-black/30">300</span></button>
<button class="btn-color-indigo-600 btn-size-sm">Indigo Button <span class="badge-color-black/30">300</span></button>
</div>Badge inside buttons collection
<div class="flex gap-5 flex-col">
<h1 class="flex gap-2 items-center">Header 1 <span class="badge-color-black/30">100</span></h1>
<h2 class="flex gap-2 items-center">Header 2 <span class="badge-color-black/30">100</span></h2>
<h3 class="flex gap-2 items-center">Header 3 <span class="badge-color-black/30">100</span></h3>
<h4 class="flex gap-2 items-center">Header 4 <span class="badge-color-black/30">100</span></h4>
<h5 class="flex gap-2 items-center">Header 5 <span class="badge-color-black/30">100</span></h5>
<h6 class="flex gap-2 items-center">Header 6 <span class="badge-color-black/30">100</span></h6>
</div>