Account

Buttons

Creative

Gooey Button

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

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal
npx @galactrex/ui add gooey-button

Usage

Example
import { GooeyButton } from "@/components/galactrex/gooey-button";

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

Source

Installs to components/galactrex/gooey-button.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

PropTypeDefaultDescription
childrenReactNode—Label.
dropsnumber5How many droplets.
...button propsButtonHTMLAttributes—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 and reduced motion

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