Installation
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "Welcome" | Text to display on the button |
variant | "emerald" | "purple" | "orange" | "emerald" | Color scheme variant |
icon | string | undefined | Optional icon (currently unused in implementation) |
className | string | - | Additional CSS classes |
Variants
Emerald
Green gradient with glowing effects, perfect for success or primary actions.Purple
Vibrant purple gradient, ideal for creative or premium features.Orange
Warm orange gradient, great for attention-grabbing CTAs.Dependencies
@/components/ui/button- Base button component@/lib/utils- Utility functions (cn)
Features
- Multi-layered gradient system
- Three color variants (emerald, purple, orange)
- Smooth hover animations
- Inner glow and shadow effects
- Full dark mode support
- Responsive design