Shine Button
A button component that sweeps a light-glare overlay across its surface on hover, on load, or on a timed interval.
ShineButton wraps a native <button> with a one-shot shine overlay that plays via a CSS button-shine keyframe animation. The effect can be triggered on hover (default), on mount, or repeatedly on a fixed interval. Three visual variants map to the project's global button class tokens.
Installation
npx shadcn@latest add @adv/shine-buttonUsage
import { ShineButton } from '@/components/ui/shine-button';
<ShineButton>Get started</ShineButton>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "outline" | "primary" | Visual style of the button. |
triggerOnLoad | boolean | false | Fire the shine animation 500 ms after mount. |
triggerOnHover | boolean | true | Fire the shine animation on mouse enter. |
triggerIntervalMs | number | null | null | Repeat the shine every N milliseconds if set. |
className | string | "" | Additional CSS classes merged onto the button. |
...props | ButtonHTMLAttributes<HTMLButtonElement> | — | All standard button attributes are forwarded. |