Badge

Badges are used to label items with short, descriptive information.

Usage

import Badge from '~/components/ui/Badge.astro';

<Badge>New</Badge>

Variants

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

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