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
When not to use
Do not use buttons as navigational elements. Instead, use links when the desired action is to take the user to a new page (with the exception of the back and forward buttons).
...
Writing labels
...
Do
Button labels use sentence case (Capitalize the first letter, use lowercase for everything else) and are as short as possible
...
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.
...
Use several primary buttons it will loose emphasis.
...
Stretched buttons on mobile
...
Do
Keep mobile margin with stretched button on mobile.
...
Use full screen with stretched button on mobile.
...
Alignment
Button alignment by default should be left-aligned. However, buttons can appear center-aligned or right-aligned if required.
...
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.
...