The ShimmerButton component sweeps a band of light across its face on a loop, giving a call to action a slow pulse of movement without asking the reader to hover, click or scroll first.
For the one action you want noticed on a quiet screen: a hero call to action, an upgrade prompt, an empty state's only button. The loop draws the eye continuously, so a second shimmering button on the same screen cancels the effect of the first and two competing pulses read as decoration rather than emphasis. Pair it with a plain secondary button rather than another shimmer. The sweep stops entirely under `prefers-reduced-motion`, leaving an ordinary button behind.
Add it with the CLI, open it in v0, or copy the source into your project.
Everything Shimmer Button accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children (required) | React.ReactNode | No default | Button label or content |
| shimmerColor | string | #ffffff | Colour of the light band that crosses the button |
| shimmerWidth | number | 40 | Width of the band, as a percentage of the button's width |
| duration | number | 1.4 | Seconds for the band to cross once |
| repeatDelay | number | 1 | Seconds the button rests between crossings |
| className | string | '' | Additional CSS classes for styling |
| ...props | ButtonHTMLAttributes | No default | Any other native button props, including onClick, type and disabled |
Required.