Animated Button

Installation

npx shadcn@latest add https://www.uicart.io/registry/animated-button.json

Usage

import AnimatedButton from "@/components/ui/animated-button";

<AnimatedButton
  startContent={<LogInIcon className="size-4 mr-2" />}
>
  User Login
</AnimatedButton>

Examples

With Loading State

You can show a loading state by passing the isLoading prop. By default, the loading state is false.

<AnimatedButton isLoading>Button Text</AnimatedButton>

Disabling Click Effect

You can disable the click effect by passing the showClickEffect prop. By default, the click effect is enabled.

<AnimatedButton showClickEffect={false}>Button Text</AnimatedButton>

Adding Icon

You can add an icon to the button by passing the startContent or endContent prop. By default, the icon is null.

<AnimatedButton
  startContent={<LogInIcon className="size-4 mr-2" />}
>
  User Login
</AnimatedButton>

And All Shadcn Button Props

You can pass all the props of the Button component from Shadcn to the AnimatedButton component.

<AnimatedButton
  variant="desctructive"
  size="lg"
>
  User Login
</AnimatedButton>