Use icons only when necessary

Icons can be used in buttons when additional clarity is required and the icon is highly relevant to the action. Icons should not be used for decoration.

Don't override color

Do not use custom colors for buttons. The colors of different button variations have been designed to be consistent and accessible

When to use static black and static white

To ensure maximum contrast with the background, use static black for light backgrounds and images, and use static white for dark backgrounds and images. Avoid placing static components on top of busy images with a lot of variance in contrast.

Don't use the pending state for long progress

The pending state should be reserved for indeterminate actions that are expected to take 5 seconds or less. For determinate or longer actions, use a progress bar or progress circle outside of the button.

Use a button group to show additional actions

Instead of a single split button (now a deprecated component), use a button group to show any additional actions related to the most critical action.

Display a popover when featuring subsequent options

In some instances, it's possible to have a call to action button display a popover (or tray) to feature subsequent options. These options should extend and parallel the action of the button. Do not include arbitrary or unrelated options.