Skip to main content

Buttons

Buttons trigger an action in a web page. There are 4 variants of the button component with different levels of importance and usages.

Primary Button

Use for basic and successful actions. They direct the user’s attention to the primary action the application is suggesting that the user take.

Do's

  • make sure the button‘s microcopy represents the action such as “Submit“ or “Register“
  • use an icon only when it is necessary
  • use to perform a new action, task, move to next step

Don'ts

  • don't assign an action that should be assigned for a CTA (Call To Action) or other variations of buttons
  • don't use an icon when it is not relevant or necessary to the action

When not to use

  • don't use for navigation
  • don't use for downloads
  • don't use when the primary action is negative - use secondary button
  • don't use when the action can't be undone, such as delete

Secondary Button

Use for medium-emphasis actions. They contain actions that are important but aren’t the primary action. They are used to indicate a secondary action that compliments a primary action or to reduce visual noise when there are many actions of equal importance on the page.

Do's

  • ensure the button performs an action, such as "Cancel", "Delete," "Remove" or "Replace" as the secondary action next to the primary button
  • use an icon only when it is necessary

Don'ts

  • don't use for primary positive actions – such as Submit, Send, Accept, Apply or navigation
  • don't use on its own
  • don't use for navigation
  • don't use an icon when it is not relevant or necessary to the action

Inverted Button

When to use

  • use inverted and inverted-green only on white or light color background
  • use inverted-dark only on dark background

Use for low-emphasis actions or for buttons that could have a long length text. It can be grouped with other buttons or placed independently.

When to use

  • use with low emphasis in a button group
  • use on pages/cards when the main focus should be the content and not the button
  • when there is a single action intended

When not to use

  • do not use for navigation purpose