Primer CSS Toasts Variations

Last Updated : 20 Apr, 2022

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible.

Primer CSS offers Toast that is used to show live and time-sensitive responses to the user. In this article, we will discuss Toast variations. It is used to communicate different states using error, warning, and success modifiers.

Primer CSS Toasts Variations classes:

Toast: This class is the main container of the toast element of Primer CSS.
Toast-icon: This class is used to define the toast icon.
Toast-success: This class is used to create green-colored toast icons.
Toast-content: This class contains the toast message along with the link.
Toast-error: This class contains the toast error message.

Syntax:

<div class="Toast Toast--success">
    <span class="Toast-icon">
          <svg width="..." height="..." viewBox="..." 
        class="octicon octicon-check" aria-hidden="true">
        <path fill-rule="evenodd" d="..." />
          </svg>
    </span>
            
    <span class="Toast-content">
        ...
    </span>
</div>

Example 1: Below is the example that demonstrates the use of Primer CSS Toasts variations using Toast–error class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Primer CSS Toast Variations</title>     
    <link  rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h3>Primer CSS Toast Variations</h3> 
          
        <div class="Toast Toast--error"> 
            <span class="Toast-icon"> 
                <svg width="16" height="16" fill="currentColor" 
                     class="bi bi-bank2" viewBox="0 0 16 16"> 
                    <path d="M8.277.084a.5.5 0 0 0-.554 0l-7.5  
                        5A.5.5 0 0 0 .5 6h1.875v7H1.5a.5.5 0 0  
                        0 0 1h13a.5.5 0 1 0 0-1h-.875V6H15.5a.5.5  
                        0 0 0 .277-.916l-7.5-5zM12.375 6v7h-1.25V6h1.25zm-2.5  
                        0v7h-1.25V6h1.25zm-2.5 0v7h-1.25V6h1.25zm-2.5  
                        0v7h-1.25V6h1.25zM8 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM.5  
                        15a.5.5 0 0 0 0 1h15a.5.5 0 1 0 0-1H.5z"/> 
                  </svg> 
            </span> 
              
            <span class="Toast-content"> 
                GeeksforGeeks, Computer Science portal. 
            </span> 
        </div> 
    </center> 
</body> 
  
</html>

Output:

Primer CSS Toasts Variations

Example 2: Below is the example that demonstrates the use of Primer CSS Toasts variations using Toast–warning class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Primer CSS Toast Variations</title>     
    <link  rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h3>Primer CSS Toast Variations</h3> 
          
        <div class="Toast Toast--warning"> 
            <span class="Toast-icon"> 
                <svg width="12" height="16" viewBox="0 0 12 16" 
                    class="octicon octicon-check" aria-hidden="true"> 
                    <path fill-rule="evenodd" d= 
                    "M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /> 
                </svg> 
            </span> 
  
            <span class="Toast-content"> 
                GeeksforGeeks, Computer Science portal. 
            </span> 
        </div> 
    </center> 
</body> 
  
</html>