GradientButton
Displays a button with an animated gradient border and optional gradient text.
Preview
Description
The GradientButton component is a specialized button with an animated gradient border that reverses on hover. It features customizable gradient colors and includes an optional gradient text effect. Built on top of the base Button component, it inherits all standard button functionality while adding unique visual styling.
How to use this button
Props
| Name | Type | Default | Description |
|---|---|---|---|
| gradientFrom | string | hsl(var(--blue-default)) | The starting color of the gradient. Accepts any valid CSS color (hex, rgb, hsl, CSS variables) |
| gradientTo | string | hsl(var(--turquoise-300)) | The ending color of the gradient. Accepts any valid CSS color (hex, rgb, hsl, CSS variables) |
| gradientBg | string | hsl(var(--background)) | The background color inside the button. Typically matches your theme background |
| textGradient | boolean | true | When true, applies the gradient effect to the text. When false, text uses normal foreground color |
| size | enum | "default" | Inherited from Button: "default" | "sm" | "lg" | "icon" | "icon-rounded" |
gradientFrom & gradientTo: These props control the gradient colors used for both the border and the text (if textGradient is enabled). The gradient animates on hover by reversing the color direction.
Color formats supported:
- Hex:
"#3b82f6" - RGB:
"rgb(59, 130, 246)" - HSL:
"hsl(217, 91%, 60%)" - CSS Variables:
"hsl(var(--primary))"
textGradient: Controls whether the button text has a gradient effect. When set to false, you may want to add a text color class like className="text-foreground".
size: Inherits all size variants from the base Button component, controlling the height and padding of the button.
Playground
Import from @filigran/ui:
Import {GradientButton} from '@filigran/ui'