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-accent-200 border-accent-200 dark:bg-accent-600 dark:border-accent-600 text-gray-800 dark:text-gray-50 hover:bg-accent-300 hover:border-accent-300 dark:hover:bg-accent-500 dark:hover:border-accent-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 border-accent-100 text-gray-800 dark:text-gray-50 hover:bg-accent-50 dark:hover:bg-gray-800">
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 bg-accent-700 border-accent-700 text-white dark:bg-accent-100 dark:border-accent-100 dark:text-black hover:bg-accent-800 hover:border-accent-800 dark:hover:bg-accent-50 dark:hover:border-accent-50">
Badge
</div>
Usage
Just copy-paste the HTML or Figma code into your project.