Fancy Button
Stylized button with advanced visual effects and animations
The fancy button is a glossy, dark gradient button with built-in press and hover animation. Use it for a hero call to action or a single standout action where the plain Button would feel too flat. For most actions, reach for Button instead.
Preview
Installation
Usage
Examples
Sizes
Use size to set the button's height and padding.
| Value | Description |
|---|---|
xs | Smallest height, compact padding. |
sm | Small height. |
default | Standard height and padding. |
lg | Largest height, roomier padding. |
icon | Square, for an icon-only button. |
icon_xs | Square, extra-small icon button. |
icon_sm | Square, small icon button. |
icon_lg | Square, large icon button. |
With Icons
Use leftSection and rightSection to place icons beside the label.
Custom Colors
Use color to swap the dark gradient for a custom tint.
Loading State
Pass disabled and your own spinner to show progress during async actions.
Disabled State
Set disabled to block interaction for unavailable actions.
As Link
Use render to render the button as a Next.js Link.
API Reference
The FancyButton component is built on top of Base UI's Button. All Base UI props are supported. The documentation below only covers custom props specific to our implementation.
For the complete Base UI API, see the Base UI Button documentation.
Props
FancyButton
Stylized button with gradient effects and animations. Wraps Base UI's Button.