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 | xs | sm | md | lg | md | Size of the badge |
| shape | default | rounded | square | default | Shape variant of the badge |
| className | string | - | Additional CSS classes |
Supported HTML Attributes
Because the Badge uses a standard HTML div element, it inherits and supports all standard HTML div attributes, including:
idonClickroletabIndexaria-*attributesdata-*attributes- Event handlers like
onMouseEnter,onFocus, etc.
The Badge component ensures proper accessibility and semantic HTML.