Buttons

Buttons should be used to perform an action such as:

  • toolbars
  • cards
  • submit a form
  • begin a new task
  • trigger a new UI element to appear on the page
  • new or next step in a process

Primary/Default

Secondary

outlined-orange-button

Variations

Use the primary and secondary button styles most of the time, especially in the main body of your web pages with lots of text.

These variations have intention and should be used sparingly such as on top of images, on solid colors, or when you need a button to draw attention to a main focus point on your page.