Overview

Purpose

The Toast component provides brief feedback about an operation through a message at the bottom of the screen. Toast is only used to display additional confirmation of an action, but never information that is vital to the user. This is why the Toast component cannot be used to display error messages. Screen-readers will only read the Toast if the user is idle, but it might already have timed out at that point.

Anatomy

The Toast component can be broken down into the following elements -

1. Icon (optional)
   Optional tick icon that is turned off by default.

2. Title
   The main content area for the Toast.

Variants & States

Size: Mobile & Tablet, Desktop

Mobile & Tablet

Toast spans the full viewport.

Desktop

Toast hugs the text and will expand up to a width of 912px. This max width is set to make sure the content fits the smallest possible Desktop size.