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 it with npx shadcn@latest add @cruiseui/button.
Install
Terminal
npx shadcn@latest add @cruiseui/buttonFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
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>
);
}
<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>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
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).
Props
CruiseButton
| Prop | Type | Default | Description |
|---|---|---|---|
variant? | CruiseButtonVariant | "primary" | — |
size? | CruiseButtonSize | — | — |
Also takes every native <button> attribute.
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.