Badge
Displays a badge or a component that looks like a badge with multiple color variants
Preview
Installation
Install the badge
npx shadcn@latest add https://jt-components.vercel.app/r/badge.jsonpnpm dlx shadcn@latest add https://jt-components.vercel.app/r/badge.jsonyarn dlx shadcn@latest add https://jt-components.vercel.app/r/badge.jsonbunx --bun shadcn@latest add https://jt-components.vercel.app/r/badge.jsonUsage
import { Badge } from "@/components/ui/badge"<Badge>Badge</Badge>Source Code
Loading component...
Props
| Prop | Type | Default |
|---|---|---|
variant? | "default" | "secondary" | "destructive" | "outline" | "gray" | "red" | "yellow" | "orange" | "amber" | "green" | "blue" | "indigo" | "purple" | "pink" | null | - |
className? | string | - |
children? | ReactNode | - |
Examples
Default Variants
The badge component comes with several built-in variants for different use cases.
DefaultSecondaryDestructiveOutline
Color Variants
A comprehensive set of color variants for different semantic meanings and visual hierarchy.
GrayRedOrangeAmberYellowGreenBlueIndigoPurplePink
Last updated on