import { AnimatedButton } from '@repo/registry/registry/ui/animated-button';

Animated Button

A button component with subtle scale animations for better user feedback.

Installation

pnpm dlx shadcn@latest add https://ui-registry.com/r/animated-button.json

Usage

import { AnimatedButton } from '@/components/ui/animated-button';

<AnimatedButton>Click me</AnimatedButton>

Examples

Default

<AnimatedButton>Default</AnimatedButton>

Variants

<AnimatedButton variant="default">Default</AnimatedButton>
<AnimatedButton variant="secondary">Secondary</AnimatedButton>
<AnimatedButton variant="destructive">Destructive</AnimatedButton>
<AnimatedButton variant="outline">Outline</AnimatedButton>
<AnimatedButton variant="ghost">Ghost</AnimatedButton>
<AnimatedButton variant="link">Link</AnimatedButton>

Sizes

<AnimatedButton size="sm">Small</AnimatedButton>
<AnimatedButton size="default">Default</AnimatedButton>
<AnimatedButton size="lg">Large</AnimatedButton>
<AnimatedButton size="icon">
  <PlusIcon />
</AnimatedButton>

API Reference

Props

Prop	Type	Default
variant	"default" \	"destructive" \	"outline" \	"secondary" \	"ghost" \	"link"	"default"
size	"default" \	"sm" \	"lg" \	"icon"	"default"
asChild	boolean	false
className	string	-