Glossy Gradient Button React component
A premium call-to-action button with a glossy face: a lit gradient, a glass highlight on the top half, a band of light that sweeps across on hover, an arrow that nudges forward, and a press that sinks. Ink, paper and four colour palettes, or your own two stops.
When to use the Glossy Gradient Button component
Use Glossy Gradient Button for the one call to action you want people to notice: sign up, upgrade, checkout, a launch offer. The sweep and the lift make it feel pressable.
For everyday actions use Button; a screen full of glossy buttons loses the effect.
Installation
Add the Glossy Gradient Button component to your project with the shadcn CLI. It lands in components/glossy-gradient-button.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/glossy-gradient-buttonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<GlossyGradientButton /> accepts 9 props, all optional.
| Prop | Type | Default |
|---|---|---|
| palette ink: glossy black. paper: glossy white. The rest are colour gradients. | "ink" | "paper" | "aurora" | "sunset" | "ocean" | "ember" | "ink" |
| colors Your own gradient stops, overriding the palette: [top, bottom]. | [string, string] | — |
| size | "sm" | "md" | "lg" | "md" |
| icon Icon before the label. | React.ReactNode | — |
| arrow Show an arrow after the label that nudges forward on hover. | boolean | false |
| loading | boolean | false |
| sweep Run the light sweep once on hover. | boolean | true |
| fullWidth | boolean | false |
| ref | React.Ref<HTMLButtonElement> | — |
- palette
ink: glossy black. paper: glossy white. The rest are colour gradients.
"ink" | "paper" | "aurora" | "sunset" | "ocean" | "ember"Default: "ink" - colors
Your own gradient stops, overriding the palette: [top, bottom].
[string, string] - size"sm" | "md" | "lg"Default: "md"
- icon
Icon before the label.
React.ReactNode - arrow
Show an arrow after the label that nudges forward on hover.
booleanDefault: false - loadingbooleanDefault: false
- sweep
Run the light sweep once on hover.
booleanDefault: true - fullWidthbooleanDefault: false
- refReact.Ref<HTMLButtonElement>
FAQ
- Can I use my brand colours?
- Pass colors with a lighter top stop and a deeper bottom stop, for example colors={["#7CF5C4", "#0E8F6A"]}. The glow and highlight adapt to them.
- Does the sweep play all the time?
- No, it runs once each time the pointer enters. Set sweep={false} to turn it off; reduced-motion users don't get it.
- Is it a real button?
- Yes, a native button with focus ring, disabled and aria-busy while loading.
