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	Default	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