Button

"use client"

import { Button } from "@animate-ui/react/primitives/buttons/button"

export default function ButtonDemo({
  tapScale = 0.97,
}: {
  tapScale?: number
}) {
  return (
    <Button
      tapScale={tapScale}
      className="bg-primary text-primary-foreground h-10 rounded-lg px-4 text-sm font-medium"
    >
      Button
    </Button>
  )
}

InstallationCopy Anchor Link

npm install @animate-ui/react motion

pnpm add @animate-ui/react motion

yarn add @animate-ui/react motion

bun add @animate-ui/react motion

UsageCopy Anchor Link

import { Button } from '@animate-ui/react/primitives/buttons/button';

export function Save() {
  return <Button className="rounded-md px-4 py-2">Save</Button>;
}

With asChild, the animation lands on your own element:

<Button asChild>
  <a href="/docs">Docs</a>
</Button>

AnimationCopy Anchor Link

• Pressing scales the button to tapScale (0.97), on Motion's spring for scale (stiffness: 550, damping: 30): quick, with a slight overshoot. It doesn't scale on hover, unless you set hoverScale.
• transition replaces that spring.
• <AnimateUIProvider tempo> paces the default spring.
• Under reduced motion, the button doesn't scale.

API ReferenceCopy Anchor Link

ButtonCopy Anchor Link