# Gooey Button

> A liquid button that buds droplets on hover.

Droplets bud from its edges and are pulled back in, merging like mercury; press it and it squishes. For playful brands and game menus.

- Family: Buttons
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/gooey-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 gooey-button
```

It installs to `components/galactrex/gooey-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 { GooeyButton } from "@/components/galactrex/gooey-button";

<GooeyButton onClick={play}>Play now</GooeyButton>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | Label. |
| `drops` | `number` | `5` | How many droplets. |
| `...button props` | `ButtonHTMLAttributes` | — | onClick, disabled, type and the rest. |

## Variants

- **Playful primary.** One per screen; it is loud by design.

## Accessibility

- The label stays crisp above the filtered shapes; a real button with focus ring.

## Motion

- SVG goo filter over transformed blobs.
- Reduced motion: a plain pill.