Installation
Run the following command:
Update your imports:import { Badge } from "@/components/ui/badge"
import { Badge } from "@/components/ui/badge"Usage
import { Badge } from "@/components/ui/badge";
export default function Home() {
return (
<Badge>New</Badge>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default | secondary | destructive | outline | ghost | link | success | warning | info | default | Style variant of the badge |
| size | icon | xs | sm | md | default | lg | xl | 2xl | default | Size of the badge |
HTML Attributes
The Badge component is built with a standard HTML div element and supports all its attributes:
idonClickroletabIndexaria-*attributesdata-*attributes- Event handlers like
onMouseEnter,onFocus, etc.
The Badge component ensures proper accessibility through appropriate HTML attributes.