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:
id
onClick
role
tabIndex
aria-*
attributesdata-*
attributes- Event handlers like
onMouseEnter
,onFocus
, etc.
The Badge component ensures proper accessibility and semantic HTML.