Example: order detail page (skeleton + footer)
Use a single primary action button per view to highlight the most important action
Don't place multiple Primary or Brand buttons on the same row
| 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 |
| 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 |