# Shatter Button

> Breaks into shards where you click, then flies back together.

The click is handled at once; the break is only the reply. For destructive or celebratory actions where a little drama helps.

- Family: Originals
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/shatter-button/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add shatter-button
```

It installs to `components/galactrex/shatter-button.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { ShatterButton } from "@/components/galactrex/shatter-button";

<ShatterButton onClick={archive}>Archive all</ShatterButton>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | Label. |
| `grid` | `[number, number]` | `[4, 2]` | Columns and rows of the break. |
| `reassemble` | `number` | `900` | Ms before it rebuilds; 0 stays broken until clicked again. |
| `force` | `number` | `70` | How far shards fly in px. |
| `...button props` | `ButtonHTMLAttributes` | — | onClick, disabled and the rest. |

## Variants

- **Rebuild.** Breaks and comes back: playful confirmation.
- **Stay broken.** `reassemble={0}` for a one-way action.

## Accessibility

- A real button; shards are aria-hidden copies of its face.
- Reduced motion: a short flash instead of the break.

## Motion

- Clip-path triangles moved by transform and opacity, scattered away from the click point.