When to use buttons?
Buttons are used to complete actions or events. They let you know exactly what action will take place if a user interacts with them.
Which buttons should I use?
Primary button
Use a primary button to call attention to main actions on page or section, or to highlight the strongest call to action on a page.
Secondary button
Use a secondary button with a primary button for secondary actions.
Tertiary button
The tertiary button is usually used for low-priority actions, when we have repetitive actions or when there is a high number of actions in the same component.
Default or neutral ?
|
Default |
Neutral |
|---|---|
|
Use default buttons for key actions. For example, when a user is about to take a critical action such as validating changes or downloading a PDF, you should use a default button. |
Use the neutral button when you need to display multiple key actions in the same place (e.g., filter bars or tables) or when you have a lot of visual information and don't want to highlight one of them. |
Do/Don't
|
DO |
DON'T |
Use always the same padding to wrap the button. |
Use different padding to wrap the button. |
|
|
|
|
DO |
DON'T |
Use always primary button with secondary button if there are more than one action. |
Use multiple primary button in the same area if there are more than one action. |
|
|
|
|
DO |
DON'T |
Use the same size for the buttons placed next to each other. |
Use different size of button next to each other. |