Badge

Highlight statuses or counts with compact labels

NewNeutralClose4424BookmarkSSamuel

Installation


pnpm dlx radianui@latest add badge

/components/ui/badge.tsx

import { Badge, BadgeDot } from "@/components/ui/badge"

/components/ui/badge.tsx

<Badge variant="strong" color="success">
	Active
</Badge>

PrimaryNeutralSuccessErrorWarningInfo

StrongOutlineSoft

Size 20Size 24Size 28

VerifiedProfileMetrics4.8 Ratings

UpdateUpdateUpdate

SJean MarineSJean MarineSJean MarineSJean Marine

Required Metrics Invited Verified

VIP22New CustomerSSamuel Eto 244 Errors

NewPatch 0.2.1 is now onlineSave 17% offAnnual

<Badge>

Name	Default	Values
variant	neutral	neutralstrongoutlinesoft
size	24	202428
color	primary	primaryinfosuccesswarningdanger
dot	false	boolean
asChild	false	boolean