Preview

Anatomy

Guidelines

• Text buttons clearly communicate actions users can take to achieve a goal.
• We use them in forms, modals, panels, action bars, and menus.
• In forms, button size should match the size of form elements.
• For forms with a single button, buttons can take the width of the form fields.
• Button groups should be aligned to the right. Button groups of 3 buttons should have the third button aligned to the left.
• Within a button group, the primary action button should be right-most.

Behaviour

• Buttons react on click with no delay.
• If the result of an action triggered by a button click cannot be displayed instantly, use the loading button variant until user can be moved on to the next step.
• If a success state is needed, show the success variant after the loading state.
• If a button is disabled, display a tooltip to inform users of the reason.

Do's and dont's

• Buttons are not links and should not be used as a purely navigational elements.
• Avoid using left and right icons in the same button.

Content guidelines

• A button label should be clear and precisely describe the purpose of the button, or the action performed.
• Keep labels short, no more than 3 words.
• Avoid generic text, such as "Click here". Particularly in the context of the Assistant and accessibility requirements, it is important that labels are meaningful when read out loud without surrounding text.
• In case of buttons used in the Assistant, test for varying label length in different languages.

Variants

Primary

• For the single most important action that moves the task forward within a given context.

Secondary

• For supplementary actions that the user can take.
• Use the Basic variant to additionally de-emphasize a secondary action.

Tertiary

• For less important actions available to the user, e.g. taking them outside of the main flow.
• Use the Basic variant to additionally de-emphasize a tertiary action.

Destructive buttons

• Primary destructive button: use this when a destructive action is the presumed intent of the user (e.g. to confirm deletion).
• Secondary destructive button: use this when a destructive action is one of multiple actions available to the user (e.g. when editing an entity).
• Tertiary destructive button: use this when a less impactful destructive action is needed within a context of multiple actions (e.g. a cancel button that will only close a modal).

Buttons with icons

• Add a left icon when you want to emphasize the purpose of the button.
• Add a right icon when you want to emphasize the action of the button.

Sizes

L

• For main CTAs and in most forms (when combined with L-size form elements) in the Portal

Minimum spacing for L-size buttons

M

• Main button size in Editor and Player.

Minimum spacing for M-size buttons

S

• For contained areas of limited size, e.g. the browser extension, date picker, "set as default" pattern.

Minimum spacing for S-size buttons