Skip to content

Components / Toast

Toast

Toasts are a great way to inform your users that a specific action was successful. A toast should appear when it is not obvious that a specific action was successful, such as saving a change or marking an ad as active.

Usage

Don't
Toasts are not meant to be used for error messages. If there is an error, display that error message as close to the "problem area" as possible.

Structure

Elements

  1. Container
  2. Text label
  3. Action button

Placement

Toasts should be positioned at the bottom left corner of the viewport on medium and large devices. On mobile, toasts should cover the bottom of the viewport.

Behavior

States

Visible

A toast is not visible by default; it is animated into view to call more attention to itself.

Do
Display a toast for 5 seconds, exactly.

Style

Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.

Inspect component

Theming

The following table lists the theme properties used to style this component and any variations as well as a sample value.

A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.

Examples of each theme property may be referenced by clicking a property name in the “property” column.

Sample Property Sample value
toastBackgroundColor

Toast message background color; also used as a neutral message banner color pairing and occasionally as a button in cards lists

#3E454DFF
toastTextColor

Toast message text color

#FFFFFFFF
© 2021 Jack Henry & Associates, Inc. Trademark notice
Version 0.7.0. Last updated March 23, 2021.