@neynar/ui/llm-docs/badge.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# Badge

**Type**: component

Badge - Versatile status indicator component for labels, counts, and notifications A small status descriptor component that provides visual feedback about state, category, or importance of content. Built on Radix UI Slot primitives with accessibility-first design and support for multiple semantic variants and interactive states.

## JSX Usage

```jsx
import { Badge } from "@neynar/ui";

<Badge variant={value} className="value" asChild={true}>
  {/* Your content here */}
</Badge>;
```

## Component Props

### variant

- **Type**: `"default" | "secondary" | "destructive" | "success" | "warning" | "info" | "outline"`
- **Required**: No
- **Description**: No description available

### className

- **Type**: `string`
- **Required**: No
- **Description**: No description available

### children

- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

### asChild

- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1

```tsx
// Basic status badges
<Badge>New</Badge>
<Badge variant="secondary">Draft</Badge>
<Badge variant="destructive">Error</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="outline">Pending</Badge>
```

### Example 2

```tsx
// Badge with icon content
import { Check, AlertTriangle } from "lucide-react";
<Badge>
  <Check className="mr-1" />
  Completed
</Badge>
<Badge variant="destructive">
  <AlertTriangle className="mr-1" />
  Failed
</Badge>
```

### Example 3

```tsx
// Notification count badge
<div className="relative inline-block">
  <Bell className="h-6 w-6" />
  <Badge className="absolute -top-2 -right-2 h-5 w-5 p-0 text-xs flex items-center justify-center">
    3
  </Badge>
</div>
```

### Example 4

```tsx
// Interactive badge as link using asChild
import Link from "next/link";
<Badge asChild>
  <Link href="/notifications" className="cursor-pointer">
    3 new messages
  </Link>
</Badge>;
```

### Example 5

```tsx
// Interactive badge as button
<Badge asChild>
  <button onClick={handleDismiss} className="cursor-pointer">
    Dismiss Alert
  </button>
</Badge>
```

### Example 6

```tsx
// Removable tag badge with close button
<Badge className="pr-1 gap-1">
  React
  <button
    onClick={handleRemove}
    className="ml-1 hover:bg-primary-foreground/20 rounded-full p-0.5"
    aria-label="Remove React tag"
  >
    <X className="h-3 w-3" />
  </button>
</Badge>
```