Components Confirmation overlay

Confirmation overlay

Confirmation overlays display a temporary message expressing a state change at the top of the current view.

Usage Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Confirmation overlays are available in three variations: confirmation, failure, and open on phone.

Confirmation

In most cases, an explicit confirmation is not needed. The natural change in the UI is enough to show that an action succeeded. An example is a chat message added to the history.

If the user’s action will not be visible in the UI, use the confirmation overlay to give the necessary feedback to the user.

If possible, change the UI itself instead of showing a confirmation overlay.

Confirmation overlay

The most effective confirmation is to change the UI after a user takes action.

Confirmation overlay

If a change in action doesn’t display in the UI, show a confirmation overlay.

Failure

Display a failure message when an expected process fails, such as “phone can’t be reached.”

Failure overlay

Failure overlay

Open on phone

When an activity triggered from a wearable device is opened on the user’s phone, display a confirmation that this has occurred.

Open on phone overlay

Open on phone overlay