Buttons

Use a button to carry out an action.

Anatomy

Use of labels

Labels show users what will happen when they click the button.

• Should be clear and distinct.
• Use verbs that describe the action, such as Send, Add or Delete.
• Keep it short, no more than 3 words.

Use of icons

Button with an icon indicates a specific action and it reinforces or clarifies the meaning of a label. Icons can be on right or left of your label.

Colour

Ensure that the button background colour or label colour in the case of the text button provides sufficient contrast with the context/section background.

When to use

To trigger an action. Actions which affect the website's state are buttons. Actions include: Search, Submit... etc.

An action is performed when the user interact actively with the website, ex: the user post a comment.

There are 5 types of buttons with 5 different use cases. The button with the strongest visual weight will attract the most attention.

Button name	Visual style	Usage
Call-to-action (CTA) button		funnel users into the most important action for your business ex: "Apply for funding" or "Watch live streaming". Limit to one CTA on a given page, the same CTA can be repeated within in the page.
Primary button		Only 1 primary action per context/section of the page, Primary buttons can appear in a few occurence on a page. ex: "submit","register"...
Secondary button		Secondary action that users can perform on the page and it can be used multiple times per context/section in the page. ex: "show more", "expand", "see details".
Text button		When an action does not require dominance on a page. Often use next to a primary action ex: On a form context/section "Submit" as primary, "Cancel" as a text.
Search button		use exclusively for the search function.

When not to use

For navigational purposes. If the action triggered sends a user to a different page, opens up a page in a new tab or jump to another section within the current page, use links instead because these actions don’t change anything on the website’s state. The user is passive, browsing through content (read only).

DO's

• Avoid using icons on buttons

• When you do need icons:

  • For LTR languages, left aligned icon flows better with the text.

    illustration: Primary button, label "Approve", icon left "check"

  • Place icons to the right for buttons with multiple status ex: expand/collapse buttons

    illustration: Secondary button, label "Expand" icon right "arrow-down"

DON'Ts

• Use button for navigation, use links instead.