# Badge

Badge is a neobrutalist React component from Cruise UI. A small label for status or category: Paid, New, Sold out.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/badge
```

Import: `import { CruiseBadge } from "@/components/cruise/badge";`

## When to use

Short status or category labels next to content.

## When not to

Anything people can click (use a Button). Long text.

## Example (React)

```tsx
import { CruiseBadge } from "@/components/cruise/badge";

export default function BadgeExample() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <CruiseBadge>New</CruiseBadge>
      <CruiseBadge tone="primary">Most popular</CruiseBadge>
      <CruiseBadge tone="success">Paid</CruiseBadge>
      <CruiseBadge tone="danger">Overdue</CruiseBadge>
      <CruiseBadge tone="muted" sticker>
        Sale
      </CruiseBadge>
    </div>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<span class="badge">New</span>
<span class="badge on-primary">Most popular</span>
```

## Props: CruiseBadge

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | — |
| `tone?` | `CruiseBadgeTone` | `"surface"` | — |
| `sticker?` | `boolean` | — | Rotates -3deg for a sticker look. Max 1–2 per screen. |
| `className?` | `string` | — | — |

## Accessibility

- Plain text, so screen readers read it in place.
- Status colours always come with a word (Paid, Overdue), never colour alone.