CTA button

v3.1

CTA buttons present the primary actions within a flow to help guide users through experiences.

  • Skin
  • Marko
  • React

Considerations

Hierarchy

Buttons communicate the importance of the actions on a screen.

Consistent

Buttons appear in consistent places throughout the experience.

Clear

Labels are short and express the action that will occur when pressed.

Anatomy

Style properties

Role properties

Additional properties

Behavior

Best practices

Specs

Measurements of each button size and its contents. 
Large buttons are 48px tall with 24px of horizontal padding. There is an 8px gap between the icon and title when the icon is present.
Medium buttons are 40px tall with 20px of horizontal padding. There is an 8px gap between the icon and title when the icon is present.
Small buttons are 32px tall with 16px of horizontal padding. There is an 6px gap between the icon and title when the icon is present.
The circular loading indicator in the pending state is 24px by 24px in large and medium buttons and 16px by 16px in small buttons.