badgesBeginner

Status Badges

A row of color-coded status pills (success, warning, error, neutral).

Live preview

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 status badges with Tailwind: pills with a colored dot on the left and a label on the right. Provide variants for success (green), warning (amber), danger (rose), info (blue), and neutral (gray). Use bg-{color}-100 with text-{color}-800 for accessible contrast.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/badges/1.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-app-badges
-->
<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="rounded-full bg-purple-100 px-2.5 py-0.5 text-sm whitespace-nowrap text-purple-700"
    >
      Live
    </span>

    <span
      class="rounded-full border border-purple-500 px-2.5 py-0.5 text-sm whitespace-nowrap text-purple-700"
    >
      Live
    </span>
  </div>
</div>