Rainbow Button Component
A visually striking button component with a colorful animated rainbow effect.
- Animated rainbow gradient background and glow effect
- Eye-catching design for call-to-action elements
- Fully accessible with proper focus states
- Seamless integration with forms and interactions
Installation
The RainbowButton component is part of our UI library. You can import it directly from the components directory.
Usage
Here is how to use the rainbow button in your project.
React TSX
Examples
Basic Rainbow Button
A standard rainbow button with default styling.
Large Rainbow Button
A larger version of the rainbow button.
Small Rainbow Button
A smaller version of the rainbow button.
Disabled Rainbow Button
A rainbow button in the disabled state.
Rainbow Button with Icon
A rainbow button with an icon.
API Reference
RainbowButton Component Props
The RainbowButton component extends the standard HTML button attributes, so it accepts all the props that a regular button would accept:
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content of the button |
className | string | - | Additional CSS classes to apply to the button |
disabled | boolean | false | When true, disables the button |
type | 'button' | 'submit' | 'reset' | 'button' | HTML button type attribute |
size | 'sm' | 'md' | 'lg' | 'md' | Size variant of the button |
Animation Effects
The RainbowButton includes the following animated effects:
- Rainbow gradient background that animates with a subtle flow
- Glowing effect underneath the button for added visual emphasis
- Smooth transitions on hover and focus states
- Animation speed optimized for good performance and visual appeal
CSS Variables
The component uses the following CSS variables for its rainbow effect:
--color-1: First color in the rainbow gradient--color-2: Second color in the rainbow gradient--color-3: Third color in the rainbow gradient--color-4: Fourth color in the rainbow gradient--color-5: Fifth color in the rainbow gradient