Badge

<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 [&_svg]:h-16px [&_svg]:w-16px 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>

<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 [&_svg]:h-16px [&_svg]:w-16px border-accent-100 text-gray-800 dark:text-gray-50 hover:bg-accent-50 dark:hover:bg-gray-800">
  Badge
</div>

<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 [&_svg]:h-16px [&_svg]:w-16px 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>

<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 [&_svg]:h-16px [&_svg]:w-16px 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"
  aria-live="polite"
  aria-label="Unread notifications">
  5
</div>

<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 [&_svg]:h-16px [&_svg]:w-16px 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"
  role="button"
  aria-label="Show active items">
  Active
</div>

<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 [&_svg]:h-16px [&_svg]:w-16px 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"
  aria-label="Verified">
  <span aria-hidden="true">
    <svg
      width="16"
      height="16"
      viewbox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M14.1819 6.34366C13.8985 5.28593 13.3484 4.31862 12.5843 3.53424C11.8202 2.74986 10.8676 2.17466 9.81767 1.86365C8.76773 1.55264 7.65555 1.51623 6.58751 1.75791C5.51948 1.99958 4.53131 2.51125 3.71754 3.24397C2.90377 3.97669 2.29161 4.90596 1.93962 5.94288C1.58763 6.97981 1.50759 8.0897 1.70714 9.1664C1.9067 10.2431 2.37918 11.2506 3.07939 12.0925C3.7796 12.9344 4.68412 13.5826 5.70642 13.975"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round">
      </path>
    </svg>
  </span>
</div>