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

Text link Button​

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