Default
Full-width — drops into a form column with no extra wrapping.
tsx
<GradientButton onClick={handleClick}>
Join the Waitlist
</GradientButton>Animated gradient CTA with built-in loading state.
A drop-in call-to-action button with an animated blue → cyan → blue gradient, multi-layer glow shadow, accessible focus ring, and a built-in loading spinner. Forwards refs and spreads every native button attribute.
Add the package to your project. Components ship with their own CSS — no global setup.
pnpm add @roy-ui/uiimport { GradientButton } from '@roy-ui/ui';The component is full-width by default and includes a spinner-based loading state out of the box.
Full-width — drops into a form column with no extra wrapping.
<GradientButton onClick={handleClick}>
Join the Waitlist
</GradientButton>Pass loading={true} to swap the label for a spinner and disable the button. Click to simulate an async submit.
const [loading, setLoading] = useState(false);
<GradientButton
type="submit"
loading={loading}
onClick={handleSubmit}
>
Join the Waitlist
</GradientButton>Set fullWidth={false} to size the button to its content.
<GradientButton fullWidth={false}>
Subscribe
</GradientButton>Hover lift is suppressed while disabled. Pointer falls back to not-allowed.
<GradientButton fullWidth={false} disabled>
Can't click
</GradientButton>Every native button attribute is forwarded — onClick, type, aria-*, data-*, ref, etc.
| Prop | Type | Default | Description |
|---|---|---|---|
loading | boolean | false | Replaces children with a spinner and disables the button. |
loadingLabel | ReactNode | spinner | Optional override for the loading visual. |
fullWidth | boolean | true | Stretch the button to fill its container. |
disabled | boolean | false | Standard disabled — applied automatically when loading. |
...rest | ButtonHTMLAttributes | — | All native button props (onClick, type, aria-*, data-*, ref). |