Spectre Toasts

Spectre Toasts are used to display notifications to the user. Toasts are used to display notifications on any user interaction. It can be used to alert the user if any task has passed or failed. To create a toast you need to add a container element with the toast class. You can add any text within the container, and even icons. 

Spectre Toasts Class:

• toast: This class is used to create the toast component.
• toast-themecolor: This class is used to define the theme colour of the toast like toast-primary, toast-success, etc you can choose any colour you want.

Syntax:

<div class="toast ...">
 ....
</div>

Note: You may also add a close button with the btn-clear class if needed.

The below example illustrates the Spectre toasts

Example: In this example, we will create two toasts, one will be a normal toast another one will be based on a theme.

Output:

👁 Spectre Toasts

Reference: https://picturepan2.github.io/spectre/components/toasts.html