Toasts

A small, temporary pop-up that presents feedback about an operation.

Reference: Adapted from https://developer.android.com/guide/topics/ui/notifiers/toasts.html

Custom component

Toasts are a custom GEL component.

Toast Container

A <div> element that contains all toasts.

Toasts must be wrapped with a .toast-container parent div:

<div id="toast-container" class="toast-container"></div>

The toast container positions toasts at the bottom of the page and ensures proper z-index.

Block Toast

A toast message that displays in a rectangle with square corners, a black background and white text.

Show a basic block toast
Your draft has been discarded.

Actionable Toast

A toast message that moves onto the screen from the screen's edge.

Show a block toast with an action
Your draft has been discarded.
Undo

Pill Toast

Similar to a block toast, but with rounded ends, rather than square corners.

Show a pill toast
Your draft has been discarded.
Third-party Content Disclaimer