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 it with npx shadcn@latest add @cruiseui/toggle-button-group.
Install
Terminal
npx shadcn@latest add @cruiseui/toggle-button-groupFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
"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" },
]}
/>
);
}
<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>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
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).
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.