HomeInstallationComponents

Button

BaseButton

A lightweight, gsap/react-powered button with built-in animations. Ships as a standalone component—no extra bulk, just smooth interactions.

npx argn-ui@latest add button

This command installs GSAP and @gsap/react if they aren’t already installed, and injects a pre-built BaseButton component with ready-to-use animations that can be controlled via props.

Examples

1. Scramble Button

Scramble button adds a quick, glitchy reveal to your button text.

<Button size={"lg"} animateOnHover="scramble">
  Hover me!
</Button>

2. Fade Button

Scramble button adds a quick, glitchy reveal to your button text.

<Button size={"lg"} animateOnHover="fade-up">
  Hover me!
</Button>

3. Right Fade Button

Scramble button adds a quick, glitchy reveal to your button text.

<Button size={"lg"} animateOnHover="fade-right" wobble>
  Hover me!
</Button>

4. Fade Down Button w/ Wobble Effect

Scramble button adds a quick, glitchy reveal to your button text.

<Button size={"lg"} animateOnHover="fade-down" wobble wobbleBy="words">
  Hover me!
</Button>

Component Props

Prop KeyProp ValueExplanation
animateOnHover?"fade-up" | "fade-down" | "fade-left" | "fade-right" | "scramble"Defines the animation type that triggers when the user hovers over the element.
wobble?booleanEnables or disables the wobble animation on the element.
wobbleBy?"chars" | "words"Determines whether the wobble effect applies to individual characters or entire words.