Choosing components for actions


  • Primary
  • Primary subtle
  • Secondary
  • Critical
  • Critical subtle
  • White

Primary buttons

Primary subtle buttons

Secondary buttons

Critical buttons

Critical subtle buttons

A screen with details on a traveler,
  with a critical subtle button at the button to 'Delete traveler'

White buttons

Alert buttons


  • The action navigates inside the app.
  • The action is an interaction, like opening a modal or submitting a form.

Primary ButtonLinks

Secondary ButtonLinks

Critical ButtonLinks

A form to edit payment card details with a secondary button to 'Close'
  and a critical button link to 'Delete card'


  • The action is inside text.
  • The action is less important and navigates outside the app.
  • The text inside the action is long.
  • Primary
  • Secondary

Button alignment

Button alignment in Alert

Button alignment in Modal

Button alignment in Card