Badge
Badges are used to label items with short, descriptive information.
Usage
import Badge from '~/components/ui/Badge.astro';
<Badge>New</Badge>Variants
Default Outline Secondary Accent
<Badge variant="default">Default</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="accent">Accent</Badge>Customization
You can easily override styles using the class prop.
Success Error
<Badge variant="accent" class="text-green-600 bg-green-500/10 border-green-600/20">Success</Badge>Props
| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| variant | 'default' \| 'outline' \| 'secondary' \| 'accent' | 'default' | The visual style of the badge. |
| class | string | undefined | Custom classes to merge. |