Buttons

A button allows, initiate and informs people of an action.

Variants

Primary Button
Button with Icon
Text with Icons
Variant Usage

Primary

Use this for the main call-to-action button,
that communicates action that is of the highest importance. This variant should only appear once per screen.

Button with Icon

Use this for secondary and independent actions. This can be used in isolation or paired with primary button.

Text with Icon

Use this for buttons that are not clickable for the user.

Anatomy

All rectangle button types share the same anatomy and are made up of the following:

 

  1. Text label: Text labels can expand
  2. Container: Containers can expand, and can be solid or outlined

 

Size

There are 2 width sizes across all buttons. Height is fixed at 52px

  1. Fixed: Button width remains at 180px
  2. Flexible: Button width varies and should stretch according to grid design

Text Style

All text labels in our buttons have the same text size:

 

  1. Text size at 16px.
  2. Title case (i.e. Click here, Sign up now).
  3. Use “Button label” text style on Figma for all button types.

Dos and Don'ts

doimage
When stacking buttons, limit to 2 and Primary always at the bottom.
dontimg
Do not use same variant whether it’s stacked or side-by-side.
In a side-by-side placement, limit to 2 and Primary always at the bottom.
dontimg
Do not use same variant whether it’s stacked or side-by-side.