Usage
- Julia Boyarshchikova (Deactivated)
- Sergey Kiselyov (Unlicensed)
When to use
Buttons use a variety of sizes, colors, and iconography combinations.
Use a Button to enable actions or decisions that are important to a user. They should be used throughout your UI, it can be used in situations where users need to :
submit a form,
confirm a change,
trigger a new element to appear on the page,
specify a new or next step in a process.
Button is used for actions, like ‘Load more’, ‘Filters’ etc.
Links for links.
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).
Do not use Links for actions, only for links.
Do not style Buttons as links.
Do not use two icons at the same time.
Combining button styles
Do
If you really need to use two similar buttons you can use secondary buttons.
Do
The primary button should only be used once per view.
Don’t
Use several primary buttons it will loose emphasis.
Disabled/inactive Buttons
Inactive buttons can be used to communicate to the user that a certain action would be possible if circumstances were different.
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.