Button Guidelines

Styles

In most cases, using the default button style is satisfactory. However, there are a few instances where different styles come handy:

Primary action buttons: Primary action buttons have a stronger highlight color, as these buttons should grab the attention of our users. These actions are critical in the workflow: creating a new resource, saving the document, progressing to the next screen, launching a campaign, etc. Preferably only one or two primary buttons should exist in a screen or a dialog. These buttons should be aligned to the right of a button group.

Borderless buttons: In toolbar-like containers, the context of the UI implies that the text labels and icons of these buttons are clickable. In this case, using borderless buttons can make the interface look cleaner and less "wireframe-like", without sacrificing affordance.

Small buttons: Small buttons can be used in visually dense interfaces, where the button action is making modifications in the screen (e.g. adding a new row to a table). We recommend using the default size in most cases, so only use small buttons if the default size have proven to hurt the usability of the UI.

Destructive buttons: Actions which result in loss of data (e.g. deletion of a campaign) should be triggered by a destructive-style button. To avoid misuse, right now only the destructive confirmation dialog can invoke this button style.

Link buttons: Only use link buttons when they behave like a regular hyperlink, pointing to an external document.

(Avoid using large buttons, narrow buttons, multiline text buttons. These styles are deprecated!)

States

Disabled state: Used when the button is temporarily not available. The reason should be understandable from the context of the UI (e.g. helper text or notification), or explained with a tooltip on the button.

Tooltip text examples for disabled buttons:

• "There are no changes to be saved."
• "You do not have permission to perform this action."
• "Your previews are all up to date."

Loading state: Used when the button action leads to loading on the page, without navigating to a different page. During loading, button label should be changed to the name of the process (e.g. "Saving…", "Exporting file…").

Content

• Button labels should use Title Case (major words are capitalized, minor words are not). Refer to the writing guidelines for more details.
• Keep the button labels short and straightforward, preferably less than 3 words.
• Use nouns for navigation (e.g. "Detailed View"), use imperative verbs for actions (e.g. "Refresh", "Save").
• The button should explicitly describe its action. Avoid generic labels like "OK", "Done", "Go", etc.
• Don't use line breaks in button labels.
• Keep in mind that translating might change the size of the label.
• Buttons that have no text label should have a tooltip that act as the label (i.e. icon-only buttons).