Badge Component

A versatile badge component for displaying status, categories, or labels with various visual styles.

Quick Example

Default Primary Success Warning Error Info Secondary

<Badge text="Default" />
<Badge text="Primary" variant="primary" />
<Badge text="Success" variant="success" />
<Badge text="Warning" variant="warning" />
<Badge text="Error" variant="error" />
<Badge text="Info" variant="info" />
<Badge text="Secondary" variant="secondary" />

Props

Prop	Type	Default	Description
text	string	-	The text content to display in the badge
variant	'default' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'	'default'	Visual style variant
size	'sm' \| 'md' \| 'lg'	'md'	Size of the badge
class	string	''	Additional CSS classes
dot	boolean	false	Whether to show a colored dot indicator

Variants

All Variants

Default Primary Secondary Success Warning Error Info

With Dots

Featured Active Warning Error

Sizes

Small Medium Large

Usage Examples

Basic Badge

New

<Badge text="New" />

Primary Badge with Dot

Featured

<Badge text="Featured" variant="primary" dot />

Small Success Badge

Active

<Badge text="Active" variant="success" size="sm" />

Custom Styling

Custom

<Badge text="Custom" class="ml-2" />

Import

import Badge from '../ui/atoms/Badge.astro';