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.
- 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.
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.
Use Info Toasts to surface neutral information to users.
This is the default variant for this component.
Use Success Toasts to inform users of successful or completed processes.
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.
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.