GitHub

Icon toggle

Installation

1. Install dependencies

npx shadcn-animated add button

2. Install icon toggle

npx shadcn-animated add icon-toggle

Usage

1
import { IconToggle } from "@/components/ui/icon-toggle";
2
import { Sun, Moon } from "lucide-react";
1
<IconToggle
2
    from={<Sun />}
3
    to={<Moon />}
4
/>

Auto reset

Automatically switches back to the initial icon after 3 seconds.

1
<IconToggle
2
      autoReset
3
      from={<Copy className="size-6" />}
4
      to={<Check className="size-6" />}
5
    />

Specify delay

Set how long to wait before automatically switching back to the initial icon.

1
<IconToggle
2
    autoReset
3
    resetDelay={4000}
4
    from={<Copy className="size-6" />}
5
    to={<Check className="size-6" />}
6
/>

Specify variant, size, or className

Customize the button using the same variant, size, and className options as shadcn/ui.

1
<IconToggle
2
    variant="secondary"
3
    className="p-8 rounded-full hover:bg-backgound"
4
    from={<Copy className="size-6" />}
5
    to={<Check className="size-6" />}
6
/>

Next