When to Use
Example: order detail page (skeleton + footer)
- Triggering primary, secondary, or tertiary actions in forms, dialogs, and toolbars
- Submitting forms, confirming decisions, or navigating to a new flow
- Pairing with other buttons in action groups to create clear visual hierarchy
- Use IconButton for icon-only actions in compact spaces; use GradientButton for top-level brand CTAs
Usage Guidelines
DO
Use a single primary action button per view to highlight the most important action
Don’t
Don't place multiple Primary or Brand buttons on the same row
Interaction Behavior
| Interaction | Behavior |
|---|---|
| Click / Touch | Triggers the associated action, visually switches to Activated state |
| Hover | Background color transitions to hover state in 150ms ease |
Keyboard Enter / Space | Triggers click event |
Keyboard Tab | Focuses button, shows focus ring |
| Disabled | pointer-events: none, gray background |
Accessibility
| Requirement | Details |
|---|---|
| Semantic role | Use native <button> element |
| Disabled state | Use disabled attribute |
| Contrast | Text-to-background contrast ≥ 4.5:1 |
| Focus order | Follows DOM order, supports Tab navigation |