Badges

<span class="badge-color-slate-500">100</span>

<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>

<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>

<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>

<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>

<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>

<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>