Installation

lunar add badge

Usage

import { Badge } from '@/components/ui/badge';

Basic Usage

<Badge>Badge</Badge>

Variants

<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="muted">Muted</Badge>

Sizes

<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>  {/* Default */}
<Badge size="lg">Large</Badge>

API Reference

Badge

Prop	Type	Default	Description
`children`	`string`	Required	Badge text
`variant`	`'default' \| 'secondary' \| 'success' \| 'warning' \| 'destructive' \| 'outline' \| 'muted'`	`'default'`	Visual variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Badge size
`className`	`string`	—	Additional classes for container
`textClassName`	`string`	—	Additional classes for text

Badge

Installation

Usage

Basic Usage

Variants

Sizes

API Reference

Badge

On this page