Badge

Displays a badge or a component that looks like one.

Badge

Installation

Add the badge component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/badge.json

Usage

tsx

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

Examples

Variants

DefaultSecondaryOutlineDestructiveSignal

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

<div className="flex flex-wrap gap-2">
  <Badge>Default</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="outline">Outline</Badge>
  <Badge variant="destructive">Destructive</Badge>
  <Badge variant="signal">Signal</Badge>
</div>

Signal

New

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

<Badge variant="signal">New</Badge>