@aelig/badge

Badge

Add

pnpm dlx shadcn@latest add @aelig/badge

A badge primitive with variants, sizes, and optional slot composition.

Preview

DefaultSecondaryOutlineDestructive

Usage

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

export function Status() {
  return <Badge variant="outline">Ready</Badge>
}

Variants and options

default

Primary filled badge.

secondary

Lower-emphasis filled badge.

outline

Bordered badge for neutral metadata.

sizes

sm, md, and lg size variants.