Toast

Component Status

Unstable
Show details
Unstable
Published: March 12, 2024
Updated: April 09, 2024

Design Usage

  • Appears in a layer above other content, visually similar to a mobile or desktop push notification.
  • It can disappear automatically after a set amount of time or wait for user interaction
  • Use the correct emotion variant according to a positive or negative message

Correct usage of Alert and Toast Components

Toast is designed to be an easy-to-spot notification that appears above any content. It should be noticeable every time it pops up, even repeatedly. The ideal setup is to let it disappear automatically after a set amount of time, so no user interaction is required.

Alert is intended to be a static notification directly related to a specific section or context. It is not meant to be used as a standalone element but as a supplement to a larger content block. Depending on its purpose, it can either remain on the page or disappear after the page is reloaded.