Badge
Inline indicator with multiple variants and sizes.
Usage
tsx
1import { Badge } from '@storm-ds/ui'23<Badge>New</Badge>Variants
DefaultSecondaryOutlineDestructiveSuccessWarningInfo
Sizes
SmallMediumLarge
With Icon
VerifiedBetaCaution
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning' | 'info' | 'default' | Badge style |
| size | 'sm' | 'md' | 'lg' | 'md' | Badge size |
| className | string | - | Custom classes |
Use with AI
Create a Next.js component using Storm UI's Badge. Import: `import { Badge } from '@storm-ds/ui'`. Small inline span element. Variants: default (violet), secondary (light violet), outline (bordered), destructive (red), success (green), warning (yellow), info (blue). Sizes: sm, md (default), lg. Can include icons as children alongside text. Example: `<Badge variant="success" size="sm">Active</Badge>` or `<Badge variant="warning"><WarningIcon className="w-3 h-3" />Pending</Badge>`