Components

Badges & status

Short, explicit labels communicate policy and workflow states at a glance.

Usage & approach

Never rely on color alone: keep a visible status label. Green means a successful or active state; amber and red are supporting semantic colors introduced for feedback. They are not logo colors. Badges describe state and are not buttons.

Specifications

Shape: inline-flex rounded-md px-2.5 py-1
Type: text-xs font-medium
Success: bg-[#f1f2f0] text-[#006838]
Semantics: Text labels accompany every color.

Status treatments

Active, pending, failed, and draft states with dark-mode equivalents.

<div class="flex flex-wrap gap-3">
  <span class="inline-flex rounded-md bg-[#f1f2f0] px-2.5 py-1 text-xs font-medium text-[#006838] dark:bg-[#303232] dark:text-[#f4f5f2]">Active</span>
  <span class="inline-flex rounded-md bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-800 dark:bg-amber-950 dark:text-amber-200">Pending review</span>
  <span class="inline-flex rounded-md bg-red-50 px-2.5 py-1 text-xs font-medium text-red-800 dark:bg-red-950 dark:text-red-200">Payment failed</span>
  <span class="inline-flex rounded-md bg-[#f1f2f0] px-2.5 py-1 text-xs font-medium text-[#333] dark:bg-[#303232] dark:text-[#c4c7c5]">Draft</span>
</div>

HTML + Tailwind CSS · fit to panel

Bring this into your project

Copy the HTML from the code panel. Keep complete utility names in files scanned by Tailwind, retain accessible labels and focus styles, and connect actions to your own application. Preview controls belong to this documentation and are not part of the copied example.