Use tooltips

Icon-only action buttons can be hard to identify. They should always show a tooltip upon hovering for a short period of time, displaying the name and possibly a keyboard shortcut.

Isolated action buttons

If you have an icon-only or text-only isolated action button, use the standard style to make sure it’s more easily identifiable as a button.

When using a hold icon to switch actions, only group the actions that are part of the same family. Don't group unrelated actions just for the sake of saving space.

Respect hold icon placement

In left-to-right interfaces, the hold icon is always in the bottom right corner of the action button. It's a symbolic indicator that shows that a popover menu will appear on hold. Don't change the placement of the hold icon based on the design of the interface.

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.

Selected state text color

The text color on the selected state of the over-background variant can be customized to match the background it’s on. Use the background color for selected text when the action button is on a solid color, and is dark enough to meet a 4.5:1 contrast ratio with a white background (or black background, for the static black variant).

Use black text when the button is on top of an image, or if the background is too low-contrast to meet the 4.5:1 contrast ratio.