Skip to main content

​
Usage

The Rainbow Button creates a beautiful animated rainbow effect that cycles through vibrant colors. Perfect for creating attention-grabbing buttons in your interface. 
<RainbowButton>
  Click Me
</RainbowButton>

​
Props

Prop NameTypeDefaultDescription
classstring""Additional CSS classes to apply to the button.
isstring"button"The HTML tag to render for the component.
speednumber2Duration of the animation in seconds.

​
Examples

​
Basic Usage

<RainbowButton>
  Rainbow Effect
</RainbowButton>

​
Custom Animation Speed

<RainbowButton :speed="4">
  Slower Rainbow
</RainbowButton>

<RainbowButton is="a" href="/destination">
  Rainbow Link
</RainbowButton>

​
With Custom Styling

<RainbowButton class="px-6 py-3 text-xl font-bold">
  Custom Styled
</RainbowButton>

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us