Animated Subscribe Button

Docs

An animated subscribe button useful for showing a micro animation from intial to final result.

Installation

npx shadcn@latest add "https://magicui.design/r/animated-subscribe-button"

Prop	Type	Description
buttonColor	string	The accent color for the button. This allows you to set a custom color that matches your brand's theme.
buttonTextColor	string	The color of the button text. This allows you to ensure the text is visible and matches your desired color scheme.
subscribeStatus	boolean	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.
initialText	string	The initial text displayed on the button. This is useful for setting a default label when the button first appears.
changeText	string	The final text displayed on the button after an action has been taken. This can be used to indicate a state change, such as from "Subscribe" to "Subscribed".

Contribute