For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
0
Sponsor

Badge

PreviousNext

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

BadgeSecondaryDestructiveOutline
import { Badge } from "@/components/badge/badge";

export function BadgeDemo() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
      <Badge>Badge</Badge>

Installation

$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.vercel.app/r/badge.json

Usage

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

Examples

Variants

Use the variant prop to change the badge style: default, secondary, destructive, or outline.

BadgeSecondaryDestructiveOutline
import { Badge } from "@/components/badge/badge";

export function BadgeDemo() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
      <Badge>Badge</Badge>

With Icon

Add an icon before the label.

VerifiedSecondary
import { BadgeCheckIcon } from "lucide-react";

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

export function BadgeWithIcon() {
  return (

Link

Wrap the badge in an anchor to make it a link.

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

export function BadgeLink() {
  return (
    <a href="#link" style={{ textDecoration: "none" }}>
      <Badge variant="outline">Documentation</Badge>

RTL

To enable right-to-left support, see the RTL guide.

شارةثانويمدمرمخططمتحققإشارة مرجعية
"use client";

import { BadgeCheck, BookmarkIcon } from "lucide-react";
import * as React from "react";

import { useTranslation } from "@/components/language-selector";

API Reference

Badge

The Badge component displays a badge or a component that looks like a badge.

PropTypeDefault
variant"default" | "secondary" | "destructive" | "outline""default"
classNamestring-