Badge

Badge

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

export function BadgeDemo() {

Installation


pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/badge.json

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

<Badge>Badge</Badge>

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

export function BadgeDefault() {

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

export function BadgeSecondary() {

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

export function BadgeDestructive() {

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

export function BadgeOutline() {

Verified

import { CheckCircle } from "lucide-react"

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

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "destructive" \| "outline"`	`"default"`	The visual style