Vibedex.io
Back to gallery
badgesBeginner

Numeric Badges

Counter-style badges for unread counts, version tags, and inline labels.

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a row of numeric badges with Tailwind: small pill shapes containing numeric counts (5, 12, 99+). Use solid backgrounds (red, gray, blue) with white text. Sizes for inline use (xs) and standalone (sm). Tabular-nums so digits don't shift width.

Code

html
<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/badges/3.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-app-badges-numeric
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="flex flex-wrap justify-center gap-4 p-6 w-full">
<span
      class="inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-0.5 text-purple-700"
    >
      <p class="text-sm whitespace-nowrap">Euro</p>

      <button
        class="ms-1.5 -me-1 inline-block rounded-full bg-purple-200 p-0.5 text-purple-700 transition hover:bg-purple-300"
      >
        <span class="sr-only">Remove badge</span>

        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-3"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </span>

    <span
      class="inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-0.5 text-purple-700"
    >
      <p class="text-sm whitespace-nowrap">Euro</p>

      <button
        class="ms-1.5 -me-1 inline-block rounded-full bg-purple-200 p-0.5 text-purple-700 transition hover:bg-purple-300"
      >
        <span class="sr-only">Remove badge</span>

        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-3"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </span>
  </div>
</div>