# Button group

Button group is a neobrutalist React component from Cruise UI. A row of joined buttons for switching between 2–5 views or filters.

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

```bash
npx shadcn@latest add @cruiseui/toggle-button-group
```

Import: `import { CruiseToggleButtonGroup } from "@/components/cruise/toggle-button-group";`

## When to use

Switching between views or filters that apply straight away (Day / Week / Month).

## When not to

More than 5 options (use a Select or Tabs). Actions that aren't a choice (use separate Buttons).

## Example (React)

```tsx
"use client";

import { useState } from "react";
import { CruiseToggleButtonGroup } from "@/components/cruise/toggle-button-group";

export default function ButtonGroupExample() {
  const [view, setView] = useState<"day" | "week" | "month">("week");
  return (
    <CruiseToggleButtonGroup
      label="View"
      value={view}
      onChange={setView}
      options={[
        { value: "day", label: "Day" },
        { value: "week", label: "Week" },
        { value: "month", label: "Month" },
      ]}
    />
  );
}
```

## HTML

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

```html
<div class="btn-group" role="group" aria-label="View">
  <button type="button" aria-pressed="true" class="on-primary">Day</button>
  <button type="button" aria-pressed="false">Week</button>
  <button type="button" aria-pressed="false">Month</button>
</div>
```

## Props: CruiseToggleButtonGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | Accessible name for the group, e.g. "View". |
| `options` | `CruiseToggleOption<V>[]` | — | — |
| `value` | `V` | — | — |
| `onChange` | `(value: V) => void` | — | — |
| `className?` | `string` | — | — |

## Accessibility

- role="group" with an aria-label; every button has aria-pressed.
- Arrow keys move between the buttons.
- One shadow on the group; it scrolls sideways on small screens instead of overflowing.