- Always use a button to perform an action or to change pages.
- Opt for labels that are as short as possible using a verb describing the resulting action.
- Do not write more than three words in a button.
- Respect the nomenclature of the label (lower case starting with a capital letter)
- When an icon is used, it should always help in understanding the label
- Use only one primary button per page
- Pay attention to always maintain a hierarchy between the various buttons on your page, to guide users in their choices.
- Always use the disabled state when the button is not clickable.
Buttons are the most prominent elements on the various pages and patterns of a site or an application. It is advisable to place them to the bottom right of the element in which it is found (e.g.: a modal, a filter panel, a form, a card, etc.)
In situations where you have a group buttons. We recommend placing the primary button to the far right (e.g.: in a modal, the primary button to confirm and the secondary button to cancel).