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

Documentation: Button on help.toolkit.illinois.edu

Primary/Default

Default/Primary

Secondary

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.