Button

<script setup lang="ts">
import { Button } from '@animate-ui/vue/primitives/buttons/button'

withDefaults(defineProps<{ tapScale?: number | string }>(), { tapScale: 0.97 })
</script>

<template>
  <Button
    :tap-scale="Number(tapScale)"
    class="bg-primary text-primary-foreground h-10 rounded-lg px-4 text-sm font-medium"
  >
    Button
  </Button>
</template>

InstallationCopy Anchor Link

npm install @animate-ui/vue motion-v

pnpm add @animate-ui/vue motion-v

yarn add @animate-ui/vue motion-v

bun add @animate-ui/vue motion-v

UsageCopy Anchor Link

<script setup lang="ts">
import { Button } from '@animate-ui/vue/primitives/buttons/button';
</script>

<template>
  <Button class="rounded-md px-4 py-2">Save</Button>
</template>

With as-child, the animation lands on your own element:

<Button as-child>
  <a href="/docs">Docs</a>
</Button>

AnimationCopy Anchor Link

• Pressing scales the button to tap-scale (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 hover-scale.
• 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