# Button

Button is a neobrutalist React component from Cruise UI. The core action: a thick ink border and a hard shadow it drops into when pressed.

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

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

Import: `import { CruiseButton, CruiseButtonGroup, cruiseButtonClasses } from "@/components/cruise/button";`

## When to use

Any action people take: submit a form, open a dialog, go to the next step.

## When not to

Moving to another page in running text (use a link). Picking one of a few views (use a Button group).

## Example (React)

```tsx
import { CruiseButton, CruiseButtonGroup } from "@/components/cruise/button";

export default function ButtonExample() {
  return (
    <div className="flex flex-col gap-6">
      <CruiseButtonGroup>
        <CruiseButton>Book a ride</CruiseButton>
        <CruiseButton variant="secondary">See routes</CruiseButton>
        <CruiseButton variant="danger">Cancel</CruiseButton>
        <CruiseButton disabled>Sold out</CruiseButton>
      </CruiseButtonGroup>
      <div className="on-primary brutal brutal-static p-4">
        <CruiseButtonGroup>
          <CruiseButton variant="inverted">Get started</CruiseButton>
          <CruiseButton variant="secondary">Learn more</CruiseButton>
        </CruiseButtonGroup>
      </div>
    </div>
  );
}
```

## HTML

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

```html
<button type="button" class="brutal btn on-primary">Book a ride</button>
<button type="button" class="brutal btn btn-secondary">See routes</button>

<!-- On a --primary background, the primary button inverts -->
<div class="on-primary" style="padding: 24px">
  <a class="brutal btn btn-invert" href="#start">Get started</a>
</div>
```

## Props: CruiseButton

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant?` | `CruiseButtonVariant` | `"primary"` | — |
| `size?` | `CruiseButtonSize` | — | — |

Also takes every native `<button>` attribute.

## Props: CruiseButtonGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | — |
| `align?` | `"start" \| "end"` | `"start"` | — |
| `className?` | `string` | — | — |

## Accessibility

- A real <button> (or an <a> for links via cruiseButtonClasses), so Enter and Space work.
- Visible 3px focus outline; at least 44px tall.
- Disabled buttons keep their label and use the disabled style, not just a faded colour.