Component
Shimmer Button
A button component with a looping light sweep, often called as Shimmer Effect.
Installation
Usage
Default
A default button with a looping shimmer.
1<ShimmerButton>Get Started</ShimmerButton>With Icon
Pair with an icon for contextuality.
1<ShimmerButton className="gap-1.5"><Camera className="size-4" />Scan</ShimmerButton>Icon Only
Or just an icon, it's fine too.
1<ShimmerButton className="gap-1.5"><ArrowBigUp className="size-4" /></ShimmerButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | — | Content rendered inside the button, like text or an icon. |
| className | string | — | Utility classes for custom styles like sizing or color tweaks. |
| ...props | MotionProps & ButtonHTMLAttributes | — | Any extra button or Motion props (e.g., disabled, onClick). |