Overview
The toast component, much like the desktop component, provides status updates and notices to users. Toast’s and their messages are intended to act as invitations for user action (such as a new message) or as disposable status alerts that provide users with a reference to a side affect of a user action.
Key Features
- The toast element should be positioned at the bottom of the screen with a 20px gap between the bottom navigation bar and the component.
- An optional element, the CTA button at the right side of the component allows for users to either close the toast or open the relevant content to another screen. Note, that the toast can be closed through a flick gesture.
- An icon can be assigned to the toast to provide needed context.
- The text of the toast component should not exceed more than two lines.
Usage
Text within the toast component can be emboldened to provide needed emphasis.
Avoid adding text that's more than two lines.
Align the toast at the bottom of the screen with a gap of 20px between the component and bottom navigation bar, while aligning the toast to the page margins.
Do not place the toast at the top of a given page.
Always place on top of relevant page content while always only placing the toast only in pages.
Do not place toasts on top of sheets.