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