ComponentFeatured
Animated Button
An enhanced button component with smooth animations and loading states.
Installation
1pnpm dlx shadcn@latest add "https://platform-ui.southguild.tech/r/animated-button"Components will be installed to components/platform-ui/
Usage
1import { AnimatedButton } from "@/components/platform-ui/animated-button";1<AnimatedButton variant="default">Click me</AnimatedButton>Examples
Default
Variants
Sizes
Loading State
With Icons
API Reference
AnimatedButton
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | | The visual style variant of the button. | "default" |
| size | "default" | "sm" | "lg" | "icon" | The size of the button. | "default" |
| loading | boolean | Whether the button is in a loading state. Shows a spinner and loading text. | false |
| loadingText | string | The text to display when the button is loading. | "Loading..." |
| type | "button" | "submit" | "reset" | The type attribute of the button element. | "button" |
| disabled | boolean | Whether the button is disabled. | |
| children | React.ReactNode | The content of the button. |
Animation Features
The AnimatedButton component includes several built-in animations:
- Hover Animation: Slightly scales up on hover (1.02x)
- Tap Animation: Scales down on press (0.98x) for tactile feedback
- Spring Transition: Uses a spring animation with customized stiffness and damping
- Loading State: Smooth transition to loading state with spinner animation
- Disabled State: Removes animations when disabled or loading
Customization
The component uses Framer Motion for animations. You can customize the animations by modifying the motion properties:
1<AnimatedButton
2 whileHover={{ scale: 1.05 }}
3 whileTap={{ scale: 0.95 }}
4 transition={{ type: "spring", stiffness: 500, damping: 20 }}
5>
6 Custom Animation
7</AnimatedButton>