Badge
Displays a badge or a component that looks like a badge.
DefaultSecondaryOutlineGhostDestructiveLink
Installation
npx shadcn@latest add @uqudo/badgeUsage
import { Badge } from "@/components/uqudo/ui/badge"<Badge variant="outline">Beta</Badge>Examples
As child
With asChild, the badge renders its child instead of a <span> and hands
over its styles. Link-flavoured hover states kick in automatically when the
child is an <a>.
With icon
Icons are sized to 12px. Add data-icon="inline-start" or
data-icon="inline-end" so the badge tightens the padding on the side the icon
sits on.
VerifiedTrending
API Reference
Badge
Prop
Type
badgeVariants
The class-variance-authority recipe behind the component. Call it when you need
badge styling on an element you are not rendering through <Badge>.
import { badgeVariants } from "@/components/uqudo/ui/badge"
<Link className={badgeVariants({ variant: "secondary" })} href="/changelog">
New
</Link>Prop
Type
Data attributes
| Attribute | Value |
|---|---|
data-slot | Always badge. |
data-variant | The resolved variant. |
Child icons opt into padding adjustments with data-icon:
| Attribute | Effect |
|---|---|
data-icon="inline-start" | Reduces the padding before the label. |
data-icon="inline-end" | Reduces the padding after the label. |