Badge

Displays a badge or a component that looks like a badge.

Preview

Code

Badge

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/badge

import { Badge } from "~/components/ui/badge";

<Badge variant="outline">Badge</Badge>

You can use the BadgeStyles helper to create a link that looks like a badge.

import { BadgeStyles } from "~/components/ui/badge";

<Link className={BadgeStyles({ variant: "outline" })}>Badge</Link>

Preview

Code

Badge

Preview

Code

Badge

Preview

Code

Badge

Prop	Type	Default
`variant`	`enum`	`"default"`

On This Page

Contribute