87.7k

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

Installation

pnpm dlx shadcn@latest add badge

Usage

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

You can use the asChild prop to make another component look like a badge. Here's an example of a link that looks like a badge.

import { Link } from "next/link"
 
import { Badge } from "@/components/ui/badge"
 
export function LinkAsBadge() {
  return (
    <Badge asChild>
      <Link href="/">Badge</Link>
    </Badge>
  )
}