Account

Buttons

Creative

Liquid Button

An outline button holding a little liquid with a moving surface; hover or focus and it fills, the label changing colour as the tide passes.

Install

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

Terminal
npx @galactrex/ui add liquid-button

Usage

Example
import { LiquidButton } from "@/components/galactrex/liquid-button";

<LiquidButton onClick={topUp}>Top up</LiquidButton>

Source

Installs to components/galactrex/liquid-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.
levelnumber0.18How full it rests, 0 to 1.
...button propsButtonHTMLAttributes—onClick, disabled, type and the rest.

Variants

  • Fill up. Game menus, 'top up' and refill actions.

Accessibility

  • Focus fills it like hover; label contrast flips with the fill.

Motion and reduced motion

  • Spring fill plus one looping path transform.
  • Reduced motion: a still surface.