Badge

Compact indicators for highlighting information.

New In Progress Completed Verified Urgent

<.badge>New</.badge>
<.badge color="yellow">In Progress</.badge>
<.badge color="green">Completed</.badge>
<.badge color="blue">Verified</.badge>
<.badge color="red">Urgent</.badge>

Variants

Use pill or flat badge styles to suit different design needs and contexts.

New In Progress Completed Verified Urgent

<.badge variant="pill">In Progress</.badge>
<.badge variant="flat">In Progress</.badge>

Icons

Add icons to badges for quick visual cues or additional meaning.

Uploaded Needs Review Mention Paid Approved Canceled Shipped

<.badge>
  <.icon name="hero-cloud-arrow-up" class="icon" /> Uploaded
</.badge>

<.badge color="blue">
  <.icon name="hero-check-circle" class="icon" /> Needs Review
</.badge>

Colors

Apply colors to badges for consistent theming and visual hierarchy.

Badge Orange Amber Yellow Lime Green Emerald Teal Cyan Sky Blue Indigo Violet Purple Red Pink Rose

<.badge>Badge</.badge>
<.badge color="orange">Orange</.badge>
<.badge color="amber">Amber</.badge>
<.badge color="yellow">Yellow</.badge>
<.badge color="lime">Lime</.badge>
<.badge color="green">Green</.badge>
<.badge color="emerald">Emerald</.badge>
<.badge color="teal">Teal</.badge>
<.badge color="cyan">Cyan</.badge>
<.badge color="sky">Sky</.badge>
<.badge color="blue">Blue</.badge>
<.badge color="indigo">Indigo</.badge>
<.badge color="violet">Violet</.badge>
<.badge color="purple">Purple</.badge>
<.badge color="red">Red</.badge>
<.badge color="pink">Pink</.badge>
<.badge color="rose">Rose</.badge>