Badge
Displays a badge or a component that looks like a badge.
Installation
$npx maddex add Badge
Variants
Use the variant prop to switch between the default shadcn badge treatments.
Preview
Default
Secondary
Destructive
Outline
Ghost
With Icon
Badges can render ppicons directly to communicate status without leaving the compact badge layout.
Preview
Verified
Beta
Action required
Link
Use asChild to render an anchor as the badge root when the badge should behave like a link.
Preview