Account

Buttons

Creative

Ripple Button

Every press sends a ripple out from where it landed; fast presses stack. Keyboard presses ripple from the centre.

Install

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

Terminal
npx @galactrex/ui add ripple-button

Usage

Example
import { RippleButton } from "@/components/galactrex/ripple-button";

<RippleButton tone="outline" onClick={save}>Save</RippleButton>

Source

Installs to components/galactrex/ripple-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.
tone"solid" | "outline" | "ghost""solid"Look.
durationnumber0.65Seconds per ripple.
...button propsButtonHTMLAttributes—onClick, disabled, type and the rest.

Variants

  • Any tone. Solid, outline or ghost.

Accessibility

  • The click runs at once; ripples are decorative.

Motion and reduced motion

  • Scale and opacity per ripple; at most five live.
  • Reduced motion: a brief tint.