Skip to main content

Usage

The Gradient Button is a visually striking component that features an animated rotating conic gradient border. It’s perfect for creating eye-catching call-to-action buttons or highlighting important interactive elements.
<GradientButton>
  Click Me
</GradientButton>

Props

Prop NameTypeDefaultDescription
borderWidthnumber2Width of the gradient border in pixels.
colorsstring[]Rainbow Colors ArrayArray of colors used in the conic gradient border.
durationnumber2500Duration of the gradient rotation animation in milliseconds.
borderRadiusnumber8Border radius for rounded corners in pixels.
blurnumber4Blur intensity of the gradient border effect in pixels.
classstring""Additional CSS classes for custom styling.
bgColorstring"#000"Background color of the button content.

Examples

Custom Colors

<GradientButton :colors="['#ff0000', '#00ff00', '#0000ff']">
  Custom Gradient
</GradientButton>

Custom Animation Duration

<GradientButton :duration="5000">
  Slow Rotation
</GradientButton>

Custom Border and Styling

<GradientButton 
  :borderWidth="4" 
  :borderRadius="16" 
  :blur="8"
  bgColor="#1a1a1a"
>
  Thick Border
</GradientButton>

Build docs developers (and LLMs) love