Badge

Docs

Badge

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

Badge

Installation

npx shadcn@latest add badge

import { Badge } from "@/components/ui/badge"

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

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

import { badgeVariants } from "@/components/ui/badge"

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

Badge

On This Page

Bring your app built with shadcn to life on Vercel

Trusted by OpenAI, Sonos, Chick-fil-A, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.