Account

Buttons

Creative

Shimmer Button

A band of light crosses it every few seconds. It asks for attention on a primary action without blinking or pulsing.

Install

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

Terminal
npx @galactrex/ui add shimmer-button

Usage

Example
import { ShimmerButton } from "@/components/galactrex/shimmer-button";

<ShimmerButton onClick={start}>Start free</ShimmerButton>

Source

Installs to components/galactrex/shimmer-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.
everynumber2.6Seconds between passes.
durationnumber1.1Seconds per pass.
...button propsButtonHTMLAttributes—onClick, disabled, type and the rest.

Variants

  • Primary. The one action on a pricing or launch page.

Accessibility

  • A real button; the light is an aria-hidden layer.

Motion and reduced motion

  • One transform loop with a pause between passes.
  • Reduced motion: no shimmer.