Badge

Badges are used for status indicators, labels, and tags.

Basic Usage

---
import { Badge } from '@/components/ui';
---

<Badge>Default</Badge>

Variants

<Badge variant="default">Default</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="brand">Brand</Badge>

Sizes

<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>

Pill Style

Use pill for fully rounded badges with a subtle shadow:

<Badge pill>Pill Badge</Badge>
<Badge pill variant="brand">Brand Pill</Badge>
<Badge pill variant="success">Success Pill</Badge>

Pulse Indicator

Add an animated pulse dot for attention-grabbing badges:

<Badge pulse>With Pulse</Badge>
<Badge pulse variant="brand">Brand with Pulse</Badge>
<Badge pill pulse>Pill with Pulse</Badge>

Combined Styles

Combine pill and pulse for hero-style announcement badges:

<Badge pill pulse variant="brand">v1.0 Now Available</Badge>
<Badge pill pulse>New Feature Released</Badge>

Props

Extends HTMLAttributes<'span'> — supports data-*, aria-*, class, and all standard HTML attributes.

Prop	Type	Default	Description
variant	'default' | 'success' | 'warning' | 'error' | 'info' | 'brand'	'default'	Color variant
size	'sm' | 'md'	'md'	Badge size
pulse	boolean	false	Show animated pulse dot
pill	boolean	false	Fully rounded with shadow

Examples

Status Indicator

<div class="flex items-center gap-2">
  <Badge variant="success">Active</Badge>
  <span>Project is live</span>
</div>

Article Tags

<div class="flex flex-wrap gap-2">
  {tags.map((tag) => (
    <Badge variant="default">{tag}</Badge>
  ))}
</div>

Hero Announcement

---
import Hero from '@/components/hero/Hero.astro';
import { Badge } from '@/components/ui';
---

<Hero layout="centered" size="lg">
  <Badge slot="badge" pill pulse variant="brand">
    v1.0 Public Beta is Live
  </Badge>
  <h1 slot="title">Your Next Project Starts Here</h1>
</Hero>

Table Status Column

<table>
  <tr>
    <td>Order #123</td>
    <td><Badge variant="success">Shipped</Badge></td>
  </tr>
  <tr>
    <td>Order #124</td>
    <td><Badge variant="warning">Processing</Badge></td>
  </tr>
  <tr>
    <td>Order #125</td>
    <td><Badge variant="error">Cancelled</Badge></td>
  </tr>
</table>

With Count

<div class="flex items-center gap-2">
  <span>Notifications</span>
  <Badge variant="error" size="sm">5</Badge>
</div>

Feature Labels

<div class="flex items-center gap-2">
  <Badge variant="brand">New</Badge>
  <Badge variant="info">Beta</Badge>
  <Badge variant="success">Stable</Badge>
</div>