# Animated Button (shadcn) > Drop-in animated replacement for the shadcn Button component **Source:** [https://motion.svelte.page/docs/shadcn-button](https://motion.svelte.page/docs/shadcn-button) --- # Animated Button

{#if data.downloads !== null} {data.downloads.toLocaleString()} installs {/if}

A drop-in replacement for the [shadcn-svelte Button](https://www.shadcn-svelte.com/docs/components/button) powered by `svelte-motion`. Spring-based press feedback and subtle hover lift come out of the box — no extra config needed. ## Installation Install via the shadcn-svelte CLI from our registry: ```bash npx shadcn-svelte@latest add https://motion.svelte.page/r/animated-button.json ``` This installs `AnimatedButton` alongside your existing `Button`. It automatically pulls in `@humanspeak/svelte-motion` and `tailwind-variants` as dependencies. Then use it: ```svelte Click me No motion ``` ### Manual Installation Alternatively, copy the component source directly from [GitHub](https://github.com/humanspeak/svelte-motion/tree/main/docs/src/lib/shadcn/ui/button). ## Live Demo Try clicking and hovering on each variant:

### Variants

DefaultSecondaryOutlineGhostLinkDestructive

### Sizes

SmallDefaultLarge

### With Icons

SendDownloadSettingsDelete

### As Link

Visit DocsGitHub

### Disabled State

DisabledDisabled OutlineDisabled Secondary

### Without Animation Set `animated={false}` to get vanilla shadcn behavior with no motion:

No AnimationStatic OutlineStatic Secondary

## Animation Details | Variant | whileTap | whileHover | Transition | |---------|----------|------------|------------| | default, secondary, outline, ghost, destructive | `scale: 0.97` | `y: -1` | Spring (400/25) | | icon, icon-sm, icon-lg | `scale: 0.9` | `scale: 1.08` | Spring (400/25) | | link | `scale: 0.97` | `scale: 1.03` | Spring (400/25) | The `animated` prop (default `true`) lets consumers opt out entirely for vanilla shadcn behavior — useful for cases where the animation conflicts with a parent layout. ## API All standard [shadcn-svelte Button props](https://www.shadcn-svelte.com/docs/components/button) are supported, plus: | Prop | Type | Default | Description | |------|------|---------|-------------| | `animated` | `boolean` | `true` | Enable/disable motion animations | | `variant` | `string` | `"default"` | Visual variant | | `size` | `string` | `"default"` | Size variant | | `href` | `string` | — | Renders as `` (or `motion.a`) when set |