Components

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

Primary button is designed for users to perform the most important task in a web page. The visual design is more distinguishable from the secondary button.

Do's

  • make sure the button‘s microcopy represents the action such as “Submit“ or “Register“
  • use an icon only when it is necessary

Don'ts

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

When to use

  • as a form button such as submit, or save
  • perform a new task
  • move to the next step
  • as a primary action

When not to use

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

Secondary Button

It is used to represent the secondary action in a web page. It is paired with a primary button. The secondary button serves as the negative action of the pair, such as “Delete,” "Cancel" or “Remove”.

Do's

  • ensure the button functions a negative action, such as "Cancel", "Delete," "Remove" or "Replace" as the secondary action next to the primary button
  • follow the order of the button group; right to the primary button
  • use an icon only when it is necessary

Don'ts

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

When to use

  • to indicate a negative action, to pair it with a primary button
  • as a secondary action next to the primary button - such as Cancel, Reject
  • next to the primary button if it is a yes and no scenario

When not to use

  • do not use for navigation
  • do not place it to the left side of the button group

Text Button

Text button is used in a web page with less prominent action. It can be grouped with other buttons or placed independently.

Do's

  • make sure the button represents a less important action, such as "Show more", "Expand" or "See details"

Don'ts

  • use it when the action has high importance in the hierarchy

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

Call to action (CTA) button

Call to action button (CTA) captures users' attention in a web page. To perform an action or to visit another page for more information. The visual style has bright background colour and a high contrast label to indicate the importance of the action.

Do's

  • ensure the button directs to a pre-defined goal, such as 'Search by priority'

Don'ts

  • do not use more than once per page (except where the main action or user goal is repeated on the same page)

When to use

  • for promoting a message, or highly important content you want to draw users' attention

When not to use

  • do not use for site navigation purpose