When to Use
Example: purchase page (skeleton) + compact Add to cart (bottom-right)
- High-impact, brand-level call-to-action such as "Shop Now" or "Get Started"
- Hero sections, landing pages, or promotional banners where visual emphasis is needed
- Limit to one Gradient Button per view to maintain visual hierarchy
- Not suitable for secondary or tertiary actions — use standard Button instead
Usage Guidelines
DO
Use only for the most important brand-level CTAs on a page (e.g. "Shop Now", "Explore More"). Place at most one per view
Don’t
Don't place multiple Gradient Buttons on the same row. Don't use for secondary or low-priority actions
DO
Pair with a leading Star icon or trailing Arrow icon to guide user attention. Prefer full corner radius
Don’t
Don't modify the gradient colors (breaks brand consistency). Don't layer over dark backgrounds
Interaction Behavior
| Interaction | Behavior |
|---|---|
| Click / Touch | Triggers associated action, opacity switches to Active state (0.8) |
| Hover | opacity transitions to 0.9 in 150ms ease |
Keyboard Enter / Space | Triggers click event |
Keyboard Tab | Focus shows brand-pink focus ring |
| Disabled | pointer-events: none, gray background, gradient disappears |
Accessibility
| Requirement | Details |
|---|---|
| Semantic role | Use native <button> element |
| Disabled state | Use disabled attribute |
| Contrast | White text on gradient background contrast ≥ 4.5:1 |
| Focus order | Follows DOM order, supports Tab navigation |