Badge
Displays a badge or a component that looks like a badge.
Badge
Installation
npx shadcn@latest add https://exawizards.com/exabase/design/registry/badge.jsonUsage
import { Badge } from "@/components/ui/badge"<Badge variant="outline">Badge</Badge>Link
You can use the badgeVariants helper to create a link that looks like a badge.
import { badgeVariants } from "@/components/ui/badge"<Link className={badgeVariants({ variant: "outline" })}>Badge</Link>API
Props of the div element are also available.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | "secondary" | "info" | "success" | "warning" | "error" | default | The variant of the badge. |
Examples
Variant
Default
Outline
Secondary
Info
Success
Warning
Error
Custom