Overview

Buttons are a type of call to action (CTA) the user can click or press. Button labels should indicate the type of action that will occur when the button is pressed.

Anatomy

Basic Usage

Button Sizing

Buttons come in various sizes. When it comes to selecting a certain button size, use your best judgement depending on the context of the UI.

Emphasis

Use button variants depending on the type of action and emphasis you want.

Primary/Base Buttons

Primary buttons are at the top of the emphasis hierarchy. In general, this button commands the most attention and a UI should contain a single high-emphasis button that makes it clear that other buttons have less importance in the hierarchy. Primary buttons are reserved for constructive/positive actions, like building a new cluster.

Note: Base buttons are reserved for marketing properties and modals.

Default Buttons

Default buttons are lower-emphasis buttons. They are often paired next to primary or base buttons and can be used for close or cancel actions.

Outline Buttons

Although Default buttons have less emphasis, they can still be visually heavy. In instances where your layout requires multiple secondary actions, Outline buttons may be a better choice to differentiate emphasis.

Danger/Red Buttons

Danger buttons should be used to show destructive CTAs, like deleting a backup. Due to the nature of the buttons being bright red, Danger buttons tend to have very high emphasis and should be used in moderation. When you have many secondary Danger buttons on one screen, consider using the Danger Outline buttons.

How to use this component

Labeling

Keep buttons content sentence case and concise. Only capitalize the first letter of the CTA and the first letter of a proper noun, like Atlas, Data Lake, Ops Manager, etc.

Cluttered CTAs

When there are several CTAs in proximity to each other on a page, this can overwhelm the user. Consider using smaller/lower emphasis variants to keep the UI from becoming to noisy.

As Triggers

Buttons can also be used as triggers for opening Menu dropdowns. In this scenario, consider pairing the button with a caret as an extra affordance that there are other actions nested.