Badge

Installation

›pnpm dlx shadcn@latest add @evolphin/badge

Usage

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

<Badge>Badge</Badge>

Type Definitions

interface BadgeProps {
  /** The visual style of the badge */
  variant?: "default" | "secondary" | "destructive" | "outline";   
BadgeProps.variant?: "default" | "secondary" | "destructive" | "outline" | undefined
The visual style of the badge
}

Examples

Default

Badge

Secondary

Destructive

Outline

API Reference

Prop	Type	Default	Description
`variant`	`"default" \	"secondary" \	"destructive" \
`className`	`string`	-	Additional CSS classes

Accessibility

The Badge component renders as a div by default, but can be changed to any other element using asChild.

Search

Badge

On this page