Skip to main content

​
Installation

    ​
    Usage

    showLineNumbers
    import { AnimatedSubscribeButton } from "@/components/ui/animated-subscribe-button"
    showLineNumbers
    <AnimatedSubscribeButton>
  <span>Subscribe</span>
  <span>Subscribed</span>
</AnimatedSubscribeButton>

    ​
    Props

    PropTypeDefaultDescription
    childrenReact.ReactNode-Must be exactly two <span> elements.
    subscribeStatusboolean-Controlled state for subscription status.
    classNamestring-Additional class names for the button.
    onClick(event: MouseEvent<HTMLButtonElement>) => void-Click event handler.
    …restHTMLMotionProps<"button">-All motion button props are supported.

    ​
    Important Notes

    • The component requires exactly two children, both must be <span> elements
    • First <span> is shown in the unsubscribed state
    • Second <span> is shown in the subscribed state
    • Can be used as controlled or uncontrolled component

    ​
    Examples

    ​
    Uncontrolled (Default)

    showLineNumbers
    <AnimatedSubscribeButton>
  <span>Subscribe</span>
  <span>Subscribed ✓</span>
</AnimatedSubscribeButton>

    ​
    Controlled State

    showLineNumbers
    const [isSubscribed, setIsSubscribed] = useState(false)

<AnimatedSubscribeButton
  subscribeStatus={isSubscribed}
  onClick={() => setIsSubscribed(!isSubscribed)}
>
  <span>Subscribe to Newsletter</span>
  <span>You're Subscribed!</span>
</AnimatedSubscribeButton>

    ​
    With Icons

    showLineNumbers
    import { Bell, BellOff } from "lucide-react"

<AnimatedSubscribeButton>
  <span className="flex items-center gap-2">
    <Bell className="size-4" />
    Subscribe
  </span>
  <span className="flex items-center gap-2">
    <BellOff className="size-4" />
    Unsubscribe
  </span>
</AnimatedSubscribeButton>

    ​
    Custom Styling

    showLineNumbers
    <AnimatedSubscribeButton className="bg-gradient-to-r from-purple-500 to-pink-500">
  <span>Follow</span>
  <span>Following</span>
</AnimatedSubscribeButton>

    Build docs developers (and LLMs) love

    Get started for freeTalk to us