Getting Started
Foundations
Integrations
Components
Badge
A small visual indicator for labeling, categorizing, or displaying status information.
#Installation
npx @dinachi/cli@latest add badge#Usage
tsx
import { Badge } from '@/components/ui/badge'#Examples
#API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info' | 'default' | The visual style variant of the badge. |
| size | 'sm' | 'default' | 'lg' | 'default' | The size of the badge. |
| rounded | 'default' | 'sm' | 'md' | 'lg' | 'none' | 'default' | The border radius of the badge. |
| icon | ReactNode | — | Icon to display before the content. |
| dismissible | boolean | false | Whether to show a close button. |
| onDismiss | () => void | — | Callback when close button is clicked. |