Skip to main content
Odyssey Design System
Odyssey Design System

Toast

Toasts are transient, non-disruptive messages that provide at-a-glance, asynchronous feedback or updates.

# Anatomy

Each Toast is made up of up to four parts: Icon & Color, Title, Body, and a Dismiss Button.

Icon & Color
These are mapped to the different variants of Toast and shouldn't be mixed.
Title
Provides quick context; one line max
Body (Optional)
Supplemental information. Be concise - less than three lines of content - as your Toast will soon vanish!
Dismiss "X"
Included to ensure users are able to dismiss Toasts manually. Placement is handled automatically based on content.

# Behavior

Toasts may be triggered by different types of events, but they are always transient. With this in mind, Toasts should not include any interactive or long-form content.

The Toast pen will take care of positioning and layout automatically. Toasts will appear in the bottom-right corner above all other content.

If multiple Toasts are triggered in a short time, they will stack in order of appearance. For visual consistency, Toasts will resize to match the largest Toast visible.

# Variants

# Info

Use Info Toasts to surface neutral information to users.

This is the default variant for this component.

# Success

Use Success Toasts to inform users of successful or completed processes.

# Caution

Use Caution Toasts to inform users of tasks or processes that may need their attention.

When using the Caution variant, ensure the user does not need more context than you can give in the space available.

# Danger

Use Danger Toasts to inform users that an error has occurred.

When using a Danger Toast, be sure that the error is also logged elsewhere, so a user can refer to it later.

Do not use Danger Toasts for in-page errors such as invalid form fields. Instead, use static messaging the user can refer to while addressing their error.