When to use
Buttons use a variety of sizes, colors, and iconography combinations.
...
submit a form,
confirm a change,
begin/create a new task,
trigger a new element to appear on the page,
specify a new or next step in a process.
...
Do not use two icons at the same time.
...
Writing labels
...
Do
Button labels use sentence case (Capitalize the first letter, use lowercase for everything else) and are as short as possible
...
Don’t
Use label while clearly explaining what happens when the button is activated.
The button text should be actionable so users know exactly what to expect when clicking.
...
Do
Button labels are as short as possible, while clearly explaining what happens when the button is activated.
...
Don’t
For maximum legibility, a text label should remain on a single line. Find another label if you can’t do it !
...
Combining button styles
...
Do
When using multiple buttons, you can place an outlined primary button next to a primary button.
...
Don’t
Avoid using two primary buttons next to one another.
...
Do
If you really need to use two similar buttons you can use secundary buttons.
...
Do
The primary button should only be used once per view.
...
Don’t
Use several primary buttons it will loose emphasis.
...
Stretched buttons on mobile
...
Do
Keep mobile margin with stretched button on mobile.
...
Don’t
Use full screen with stretched button on mobile.
...
Button alignment by default should be leftstart-aligned. However, buttons can appear center-aligned or rightend-aligned if required. в зависимости от ориентации текста
Central alignment is normally saved for more visual areas of projects such as introductory banners or carousels (the new decathlon.fr website introductory banner being a good example of a centrally aligned button).
Right alignment is normally saved for forms, stepped submissions, or simple Icon with Label hyperlinks.
...
Disabled/inactive Buttons
Inactive buttons can be used to communicate to the user that a certain action would be possible if circumstances were different, such as entering an email address in a text field prior to signing up.
Reduce opacity, not hue saturation.
Put it next to enabled buttons when it's possible.
Use “cursor disabled” on desktops on hover state.
Add supporting text.