Callout boxes

Key point: A colored box to let you know of something special, like a tip, note, warning, or error.

Callout boxes are used throughout the user interface when there is something we think is useful in context or is special. They are typically shown at the top or bottom of the page or next to an action.

Some callouts can be closed by clicking the icon.

Note

An ordinary note – blue with   icon.

Tip

A recommendation or useful tip – yellow with  icon.

Success

Describes a successful action or an error-free status. It’s used only in interactive or dynamic content – light green box with icon.

Warning

Suggests proceeding with caution. When used in interactive or dynamic content, it usually indicates that some errors occurred but the process could still complete – orange with icon.

Error

Stronger than a Warning; it means “Don’t do this.” When used in interactive or dynamic content, it indicates that errors occurred and the process probably failed to complete – red with icon.

Examples

The following are examples of callout boxes.

This is an example of a warning callout block.

This is an example of a tip callout block.