# Badge

## Overview

_[Design to fill]_

- **When to use**: _[Design to fill]_
- **When not to use**: _[Design to fill]_

## Anatomy

_[Design to fill]_

## Variants

| `type`         | Intent                                     |
| -------------- | ------------------------------------------ |
| `neutral`      | Default, low-emphasis label (the default). |
| `brand`        | Lighthouse-related status.                 |
| `info`         | Informational status.                      |
| `success`      | Positive or successful status.             |
| `warning`      | Caution status.                            |
| `danger`       | Error or critical status.                  |
| `intelligence` | Automation and generation (AI) status.     |

## Props / API

### `Badge`

| Prop       | Type        | Default     | Description                                        |
| ---------- | ----------- | ----------- | -------------------------------------------------- |
| `children` | `ReactNode` | -           | Badge content (label text).                        |
| `type`     | `BadgeType` | `"neutral"` | Visual/semantic style of the badge. (See Variants) |
| `iconName` | `IconName`  | -           | Optional leading icon.                             |
| `isSmall`  | `boolean`   | `false`     | Renders the smaller badge size.                    |

Extends `HTMLAttributes<HTMLDivElement>`. All standard `<div>` attributes are forwarded to the underlying container via `...props`.

## Code examples

```tsx
import { Badge } from "@mylighthouse/prism-react";

export default function BadgeExample(): React.JSX.Element {
  return (
    <>
      <Badge type="neutral">Neutral</Badge>
      <Badge type="success" iconName="checkmark">
        Active
      </Badge>
      <Badge type="warning" isSmall>
        Pending
      </Badge>
      <Badge type="danger" iconName="cross">
        Failed
      </Badge>
    </>
  );
}
```

## A11y intent

_[Design to fill]_