Badge
View on shadcn/uiDisplays a badge or a component that looks like a badge.
NewFeaturedPopularDeprecated
Verified123Premium99+
Installation
pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/badge.jsonUsage
import { Badge } from "@/components/ui/badge";<Badge>New</Badge>Examples
Variants
DefaultSecondaryOutlineDestructiveWarningSuccessGhostLink
With icon
FeaturedVerifiedNotificationsHot
Combine badges with icons to add visual context.
As link
Badges automatically adapt their hover styles when used within anchor tags.
API reference
| Prop | Type | Description |
|---|---|---|
variant | "default" | "secondary" | "outline" | "destructive" | "warning" | "success" | "ghost" | "link" | The visual style of the badge |
asChild | boolean | Render as a child component (uses Radix Slot) |