Badge

Badges are used to highlight important keywords or statuses.

Installation

Run the following command

npx vibes@latest add badge

Usage

import { Badge } from '@/vibes/soul/primitives/badge';function Usage() {  return <Badge>New</Badge>;}

API Reference

BadgeProps

PropTypeDefault
className
string
children*
string
shape
'pill' | 'rounded'
"rounded"
variant
'primary' | 'warning' | 'error' | 'success' | 'info'
"primary"

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --badge-primary-background: var(--primary-highlight);  --badge-accent-background: var(--accent);  --badge-success-background: var(--success-highlight);  --badge-warning-background: var(--warning-highlight);  --badge-error-background: var(--error-highlight);  --badge-info-background: var(--info-highlight);  --badge-text: var(--foreground);  --badge-font-family: var(--font-family-mono);}