Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
import { AnimatedSubscribeButton } from "@/registry/magicui/animated-subscribe-button";
import { CheckIcon, ChevronRightIcon } from "lucide-react";
export function AnimatedSubscribeButtonDemo() {
return (
<AnimatedSubscribeButton className="w-36">
<span className="group inline-flex items-center">
Follow
<ChevronRightIcon className="ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1" />
</span>
<span className="group inline-flex items-center">
<CheckIcon className="mr-2 size-4" />
Subscribed
</span>
</AnimatedSubscribeButton>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/animated-subscribe-button
Usage
import { AnimatedSubscribeButton } from "@/components/magicui/animated-subscribe-button";<AnimatedSubscribeButton>
<span>Follow</span>
<span>Subscribed</span>
</AnimatedSubscribeButton>Examples
Basic
import { AnimatedSubscribeButton } from "@/registry/magicui/animated-subscribe-button";
import { CheckIcon, ChevronRightIcon } from "lucide-react";
export function AnimatedSubscribeButtonDemo() {
return (
<AnimatedSubscribeButton className="w-36">
<span className="group inline-flex items-center">
Follow
<ChevronRightIcon className="ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1" />
</span>
<span className="group inline-flex items-center">
<CheckIcon className="mr-2 size-4" />
Subscribed
</span>
</AnimatedSubscribeButton>
);
}
Controlled (Async Behavior)
"use client";
import { AnimatedSubscribeButton } from "@/registry/magicui/animated-subscribe-button";
import { CheckIcon, ChevronRightIcon } from "lucide-react";
import { useState } from "react";
export function AnimatedSubscribeButtonControlledDemo() {
const [subscribed, setSubscribed] = useState(false);
const [loading, setLoading] = useState(false);
async function handleClick() {
setLoading(true);
await new Promise((res) => setTimeout(res, 1500));
setSubscribed(true);
setTimeout(() => setSubscribed(false), 3000);
setLoading(false);
}
return (
<AnimatedSubscribeButton
className="w-36"
subscribeStatus={subscribed}
onClick={() => !loading && handleClick()}
>
<span className="group inline-flex items-center">
{loading ? (
"Sending..."
) : (
<>
Follow
<ChevronRightIcon className="ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1" />
</>
)}
</span>
<span className="group inline-flex items-center">
<CheckIcon className="mr-2 size-4" />
Subscribed
</span>
</AnimatedSubscribeButton>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
subscribeStatus | boolean | false | A boolean flag to check the condition for the button. This property can be used to toggle the button's state, such as subscribed or unsubscribed. |
children | React.ReactNode | - | The content to be displayed inside the button. Should contain two children - first for unsubscribed state and second for subscribed state. |
className | string | - | Optional class name to be applied to the button for custom styling. |
Credits
- Credit to @dipesh
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development