Button
Common Usage
Buttons are used as part of larger components or patterns in a UI, they follow a specific
- Calls to action (CTAs)
- Moving users through a sequence of screens
- Ending or completing a process
- Navigation
Buttons vs Links
Buttons are primarily for actions, while
Design Principles
As buttons are typically performed during important definitive actions in a flow, they must follow these general design principles:
- Be easily identified amongst other UI elements, including other buttons
- Provide a visual indication that it will trigger an important action
- Be clear as to the action that will occur when it's triggered
Anatomy
1. Button copy: Indicates what clicking the button does.
2. Icon (optional): To further emphasize the button's action.
Example
Placement
Multiple button types can be used to express different emphasis levels as described in the
Within a page
- Primary actions - generally associated to high-emphasis buttons, are typically placed on the bottom left (as the layout allows)
- Supporting secondary actions (mid-emphasis) to be placed alongside the left of the primary action
- Tertiary actions (low-emphasis) to the placed elsewhere as needed but not as the primary focus
Inside modals
- Primary actions are typically placed on the bottom right (as the layout allows)
- Supporting secondary actions to be placed alongside the left of the primary action
- Tertiary actions to the placed elsewhere as needed but not as the primary focus
Related components
- To combine or lay out multiple buttons, use the
- The button group component is used to create the
- For navigational actions that appear within or directly following a sentence, use the
Using multiple buttons together
Buttons with related actions can be placed next to each other. See also button hierarchy.
Examples of such actions are:
- Forwards and backwards - which are often represented by 'Continue' and 'Back' or 'Accept' and 'Cancel'.
- 'Create a quote' and 'Post a project' - Where both actions takes users to our main funnel.
- 'Log In' and 'Sign Up' - where both action leads users to the platform.
Do
Don't
Have a clear hiearchy of actions using different emphasis buttons
Primary actions such as moving forward ('Continue' or 'Accept') should use a high emphasis contained button, while going backwards ('Back', ' Cancel', or 'Delete') is considered a less-pronounced action and should use the text button.
Aim to always have only one primary action on each section of the page. Other important actions should use the outline button. See
Do
Don't
Do
Don't
Limit the number of buttons
The maximum number of buttons we can have in a grouping is three, and the most common usage is when there is a skippable step in a form.
Don't
Content guidelines and best practises
Buttons should be clear and concise to indicate to the user the action they are about to take.
Use action verbs
Button labels should inspire users to act with action verbs. Users who read an action verb know what the button will do. They can take action without reading any supporting text such as confirmation dialog.
Do
Don't
Use precise diction
Each action verb you use has a specific connotation. Users can misinterpret what the button will do if your diction isn't precise.
Do
Don't
Use task-specific language
A vague and generic button label such as 'Submit' or 'Finish' causes uncertainty in users. They're unsure what the button will do because the label doesn't specify the intention. Users need to know the result of their actions, and only task-specific language can do this.
Do
Don't
Use concise, and easy to scan button labels to indicate the next action to the user.
Make the user's action as straightforward as possible in less than three words.
Do
Don't
Use title case capitalization
Buttons should be written with the title case with each word capitalized, except when words are articles, prepositions, or conjunctions.
- Email Us
- My Projects
- Terms and Conditions
Do
Don't
Stick to the standard hierarchy order, with primary actions on the right and secondary on the left.
Primary actions using the contained button should be placed on the right, and secondary action with the outline button should be placed to the left. If there is a third action, the less-pronounced action should be put to the left using the text button.
Don't