Page Type

Dashboard

Overview

Coming soon

Coming sooon

Usage

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.

 

  • Consider the affect localization will have on the button and what will happen to components around it.

 

  • 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.

 

  • Use task buttons to cause actions that complete a task or cause a transitional task. Do not use buttons to toggle other UX in the same context. For example, a button may be used to open an interface area but should not be used to open an additional set of components in the same interface.

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 wizard 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.