Introduction
Buttons serve as interactive components that can be activated to trigger specific actions. Their purpose is to guide users on how to proceed and offer them a means to engage with the page. The labels affixed to these buttons inform users about the intended outcome when they choose to click them.
- Inform the user of the upcoming action using action verbs or phrases
- No more than one primary button should be present on each page
- Avoid buttons as navigational elements; instead, use links to bring the user to a different page
Button types
Different types of buttons can be used to control the hierarchical structure on a screen.
- Primary buttons should be used selectively, as it is the main call to action
- Secondary buttons can be used in combination with primary buttons to show that the button is of lesser importance
- Icons can be included in buttons to make their purpose more apparent at a glance.
- Please refer to Icon Buttons for icon-only buttons and for Button Groups when displaying more than one related button.
Usage
Buttons need to communicate a clear and concise purpose and can utilise a text label, an icon, or both. Avoid generic labels such as "Okay" or "Cancel" and instead consider the specific action that clicking the button will initiate, e.g. if a button is intended for deleting the user's profile, use "Delete profile". Capitalise the first letter, use lowercase for everything else, e.g. “Complete order”.
There are three different sizes and four different types of buttons. The medium-sized button is used as default button.
Use short labels to concisely signal a buttons intent, e.g. "Add to cart" and "Complete Order"
Don't use long sentences or long descriptive labels to not crowd the UI. Don't use non-descriptive labels like "click here".
Use descriptive verbs or commands for button labels, e.g. Complete order or Publish.
Refrain from using generic labels, such as "yes", "no" and "okay" for buttons.
Use icons only when beneficial to the user and to help communicate a button's function. In a button group, only the primary button shall have an icon.
Avoid using too many button icons in button groups. Avoid using icons in non-primary buttons.
Use a primary button to signal the highest emphasis on a screen and guide the user to the desired action.
Don't overuse primary buttons as to not confuse users. Opt for non-primary buttons instead.
Align buttons on the right-hand side of a component or pattern.
Buttons generally should not take up 100% of a screen's width on any screen size other than mobile.
Mobile Specs
Scale buttons to 100vw on mobile. If there is more than one button, stack buttons.
Buttons generally should not be displayed next to each other on mobile. Be mindful of hitareas and spacing.