Spectre Toasts

Last Updated : 30 Jan, 2022

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <strong>SPECTRE Toasts Class</strong> 
        <br><br> 
        <div class="toast"> 
            <big class="title"> 
                Windows 11: 
            </big> 
            <small> 
                A new update for based on your use 
            </small> 
            <button class="btn btn-clear"> 
            </button> 
        </div> 
        <br> 
        <div class="toast toast-success"> 
            <big class="title"> 
                Windows 10: 
            </big> 
            <small> 
                Windows 11 update is ready 
            </small> 
            <button class="btn btn-clear"> 
            </button> 
        </div> 
    </center> 
</body> 
  
</html>