Badge
Small pill label with default, outline and primary variants.
class-variance-authority
Preview
DefaultOutlinePrimary
Installation
Install the component using the CLI.
npx shadcn@latest add https://yash-sakre.github.io/Yash-Sakre/r/badge.jsonUsage
Import the component:
import { Badge } from "@/components/ui/badge";Use it in your code:
<Badge variant="primary">New</Badge>Props
| Property | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outline" | "primary" | "default" | Visual style. |
| size | "sm" | "default" | "sm" | Padding + text size. |
| ...props | HTMLAttributes<span> | — | All native <span> attributes. |