Badge
Small count indicator or status marker.
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-black-200 border-black-200 dark:bg-black-600 dark:border-black-600 text-black-800 dark:text-black-50 hover:bg-black-300 hover:border-black-300 dark:hover:bg-black-500 dark:hover:border-black-500">
Badge
</div>
Outlined
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-background hover:bg-black-50 border-black-100 text-black-800 dark:text-black-50 dark:hover:text-black-800 disabled:opacity-40">
Badge
</div>
Dark
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap text-background bg-black-700 border-black-700 hover:bg-black-800 hover:border-black-800 dark:bg-black-100 dark:border-black-100 dark:hover:bg-black-50 dark:hover:border-black-50">
Badge
</div>
Usage
Just copy-paste the HTML or Figma code into your project.