Docs
Badge

Badge

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

Badge

Installation

npx shadcn-ui add badge
npx shadcn-ui add badge

Usage

import { Badge } from "@/components/ui/badge"
import { Badge } from "@/components/ui/badge"
<Badge variant="outline">Badge</Badge>
<Badge variant="outline">Badge</Badge>

Link

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

import { badgeVariants } from "@/components/ui/badge"
import { badgeVariants } from "@/components/ui/badge"
<Link className={badgeVariants({ variant: "outline" })}>Badge</Link>
<Link className={badgeVariants({ variant: "outline" })}>Badge</Link>

Examples

Default

Badge

Secondary

Secondary

Outline

Outline

Destructive

Destructive
AvatarButton