Components

Buttons

Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.

Placement

When considering where to place a button, contemplate the order in which a user will flow through the UI. For example, a user  will need to read and interact with a form's text fields before submitting the form. Therefore, in mose cases, the submit button should be placed at the bottom of the UI container.

While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.

Variants

Button Type
Purpose

Primary

Secondary

Danger

Text

Button with Icon

Like

Disabled

For the principle call to action on the page.

For secondary actions on each page. 

When an action has harmful intentions to the user's data (delete, remove, etc.)

When an action does not require primary dominance on the page.

Icons can be used in buttons to better communicate what the button does. Icons are always paired with text. There are three variants ; left icon, right icon, stacked icon

Heart shaped button with SVG animation. Used for favoriting an account

Use when a user cannot proceed until an input is collected

Best Practices

Do

  • Make sure the label conveys a clear purpose of the button to the user.

 

  • Button labels must describe the action the button will perform and should include a verb. Use concise, specific, self-explanatory labels, usually a single word.

 

  • Buttons should always include a noun if there is any room for interpretation about what the verb operates on.

 

  • Use only a single line of text in the label of the button.

 

  • Expose only one or two buttons to the user at a time, for example, "Accept" and "Cancel". If you need to expose more actions to the user, consider using checkboxes or radio buttons from which the user can select actions, with a single command button to trigger those actions.

 

  • Show only one primary button that inherits theme color at rest state. In the event there are more than two buttons with equal priority, all buttons should have neutral backgrounds.

 

  • "Submit", "OK", and "Apply" buttons should always be styled as primary buttons. When "Reset" or "Cancel" buttons appear alongside one of the above, they should be styled as text buttons.

 

  • Default buttons should always perform safe operations. For example, a default button should never delete.

 

Don't

  • Don't use generic labels like "Ok," especially in the case of an error; errors are never "Ok."

 

  • Don’t use a button to navigate to another place, use a link instead. The exception is in a stepper where "Back" and "Next" buttons may be used.

 

  • Don’t put too much text in a button - try to keep the length of your text to a minimum.