Badge

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

Basic Usage

---
import Badge from '@/components/ui/Badge.astro';
---

<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>

Sizes

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

Props

Prop	Type	Default	Description
variant	'default' | 'success' | 'warning' | 'error' | 'info'	'default'	Color variant
size	'sm' | 'md'	'md'	Badge size

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>

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>