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
Prop | Type | Default |
---|---|---|
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);}