# Badge

## Overview

Small, inline label for status and metadata. Supports many visual variants, optional icons, link mode, and disabled state.

---

## Props

### Badge (Root)

| Prop        | Type                                                                                                                                                                                                                                                                           | Default      | Description                                  |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------ | -------------------------------------------- |
| `variant`   | `"default" \| "destructive" \| "warning" \| "success" \| "outline" \| "outline-primary" \| "outline-destructive" \| "outline-warning" \| "outline-success" \| "secondary" \| "ghost" \| "ghost-destructive" \| "ghost-accent" \| "ghost-warning" \| "ghost-success" \| "link"` | `"default"`  | Visual style of the badge.                   |
| `asChild`   | `boolean`                                                                                                                                                                                                                                                                      | `false`      | Renders the badge as its child element.      |
| `disabled`  | `boolean`                                                                                                                                                                                                                                                                      | `false`      | Disables interactions and dims the badge.    |
| `iconLeft`  | `IconName`                                                                                                                                                                                                                                                                     | `undefined`  | Optional left icon (uses `Icon` component).  |
| `iconRight` | `IconName`                                                                                                                                                                                                                                                                     | `undefined`  | Optional right icon (uses `Icon` component). |
| `className` | `string`                                                                                                                                                                                                                                                                       | `""`         | Additional classes on the root element.      |
| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                              | **required** | Text or content inside the badge.            |

---

## Behavior

- **Variants**: Outline, ghost, and semantic variants available for flexible UIs.
- **As child**: Use `asChild` to render as an anchor or any custom element.
- **Icons**: `iconLeft`/`iconRight` render `Icon` with appropriate sizes.
- **Disabled**: Applies `cursor-not-allowed` and reduces opacity.

---

## Examples

### Default

```tsx
import { Badge } from "laif-ds";

export function DefaultBadge() {
  return <Badge>Badge</Badge>;
}
```

### Variants Grid

```tsx
import { Badge, type BadgeProps } from "laif-ds";

const variants: BadgeProps["variant"][] = [
  "default",
  "destructive",
  "warning",
  "success",
  "outline",
  "outline-primary",
  "outline-destructive",
  "outline-warning",
  "outline-success",
  "secondary",
  "ghost",
  "ghost-accent",
  "ghost-destructive",
  "ghost-warning",
  "ghost-success",
  "link",
];

export function VariantsShowcase() {
  return (
    <div className="flex flex-wrap gap-2">
      {variants.map((v) => (
        <Badge key={v} variant={v}>
          {v}
        </Badge>
      ))}
    </div>
  );
}
```

### With Icons

```tsx
import { Badge } from "laif-ds";

export function WithIcons() {
  return (
    <div className="flex gap-2">
      <Badge iconLeft="Check" iconRight="X">
        Approved
      </Badge>
      <Badge variant="outline-primary" iconLeft="Pencil">
        Edit
      </Badge>
    </div>
  );
}
```

### As Link (asChild)

```tsx
import { Badge } from "laif-ds";

export function LinkBadge() {
  return (
    <Badge asChild>
      <a href="#" className="cursor-pointer">
        Clickable Badge
      </a>
    </Badge>
  );
}
```

---

## Notes

- **Icons**: Use `IconName` values supported by the design system.
- **AsChild**: Useful to keep semantics (e.g., anchors) while styling as badges.