GitHub

Badge

PreviousNext

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

Loading
Loading...
import { Badge } from "@/components/ui/badge";
 
export function BadgeDemo() {
  return (
    <div className="flex w-full flex-wrap justify-center gap-2">
      <Badge>Badge</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  );
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/badge"

Usage

import { Badge } from "@/components/ui/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";
<Link className={badgeVariants({ variant: "outline" })}>Badge</Link>

Examples

Default

Loading
Loading...
import { Badge } from "@/components/ui/badge";
 
export function BadgeDemo() {
  return (
    <div className="flex w-full flex-wrap justify-center gap-2">
      <Badge>Badge</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  );
}

Outline

Loading
Loading...
import { Badge } from "@/components/ui/badge";
 
export function BadgeVariants() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="ghost">Ghost</Badge>
    </div>
  );
}

Destructive

Loading
Loading...
import { Badge } from "@/components/ui/badge";
 
export function BadgeCustomColors() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="success">Success</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge className="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">
        Blue
      </Badge>
      <Badge className="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300">
        Purple
      </Badge>
    </div>
  );
}