Enhanced Button
An extended button component with loading states, icon support (left/right), glassmorphism, gradient, and solid color variants with glow and hover effects. Wraps shadcn/ui Button.
Installation
$ npx shadcn@latest add @orecus/enhanced-buttonRegistry:
buttonspinner@orecus/color-utils
Component
Enhanced buttons with gradient, glass, and effect variants.
Basic Variants
Gradient Colors
Solid Colors
Effects
Always-On Glow (CTA)
With Icons
Props
| Prop | Type | Default | Description |
|---|---|---|---|
loading | boolean | false | Shows spinner and disables button when true |
leftIcon | ReactNode | — | Icon to display before children (replaced by spinner when loading) |
rightIcon | ReactNode | — | Icon to display after children |
variant | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'glass' | 'gradient' | 'color' | 'default' | Button variant - 'glass' for glassmorphism, 'gradient' for colored gradient background, 'color' for flat solid color background |
color | ThemeColor | 'primary' | Color for gradient and color variants (primary, secondary, green, amber, red, blue, purple, pink, cyan, teal, orange, indigo, emerald, violet, rose, slate, gray, zinc, neutral, stone) |
glow | boolean | false | Always-on glow effect around the button (for CTA buttons). Works with gradient and color variants. |
hoverEffect | 'none' | 'scale' | 'glow' | 'scale-glow' | 'none' | Hover animation - 'scale' for size change, 'glow' for shadow, 'scale-glow' for both |
clickEffect | 'none' | 'scale' | 'none' | Click animation - 'scale' for scale-down feedback on click/active |
className | string | — | Additional CSS classes for the button |