UI Pattern
Action Buttons
A flexible button system for actions, hierarchy, feedback and navigation.
Color roles
Interaction colors
Semantic colors used across default, hover, destructive and disabled states.
Primary
#424874
#363B61
Neutral
#64748B
#475569
Destructive
#A74444
#8C3737
Disabled
#F1F5F9
#E2E8F0
#94A3B8
Focus
#424874
Structure
Button anatomy
Core dimensions and spacing shared across the button family.
- Height
- 40px (md)
- Text
- 14px Manrope semibold
- Radius
- 8px
- Icon
- 16px
- Padding
- 16px inline
- Icon gap
- 8px
Button types
Action hierarchy
Variants defined by emphasis and interaction intent.
Primary action
Highest-priority action
Secondary action
Supporting action
Neutral action
Optional or dismissive choices
Text action
Low-emphasis inline action
Inverse action
For dark or high-contrast surfaces
Destructive action
Irreversible or high-risk actions
Disabled state
Unavailable action
Dimensions
Size scale
Three control sizes for different interface densities.
Icon buttons
Icon-only buttons
Compact controls for familiar actions, with accessible names supplied in markup.
Styles
Shape
Size scale
Action groups
Previous / Next actions
Paired actions for guided forms, setup flows and multi-step tasks.
Footer layout
Actions aligned within a form or step footer.
Stacked layout
Alternative arrangement for narrow layouts.
Boundary states
Unavailable navigation at the beginning or end of a flow.