Your ImageYour Image
  • About
  • Templates10
  • Blocks81New
  • Icons1635
  • Graphics4K
  • Components107New
  • About
  • Components
  • Pricing
  • Contact
Book an Intro call
Book an Intro call
  • About
  • Works
  • Pricing
  • Templates
  • Blocks
  • components
  • Graphic
  • Backgrounds
  • Designs
  • Icons
  • Logos
  • Flags
  • Privacy
  • Terms
  • Contact
© 2025Made with by Ali Imam

  • Accordion
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button

Badge

PreviousNext

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

Installation

pnpm dlx shadcn@latest add https://aliimam.in/r/badge.json

Usage

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

Link

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>
  )
}
AvatarBreadcrumb

On This Page

InstallationUsageLink