Primer CSS Toasts

Last Updated : 24 May, 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. It is created with GitHub’s design system.

Toast is a kind of alert message or push notification, generally used to notify or display short information or time-sensitive feedback to the users.

Primer CSS Toasts:

Default: This is the default toast used for adding a default message.
Variations: The toast has various variations so, it uses the success, warning, and error modifiers to communicate different states.
Toast with dismiss: It allows the user to dismiss a Toast.
Toast with link: It allows the user to add a link within a toast.
Toast animation in: It allows the user to add animation in and out of a toast.
Toast with loading animation: It allows the user to a loading spinner.
Toast position: This is used to position Toasts at the bottom left of the viewport i.e, using position-fixed bottom-0 left-0.

Syntax:

<div class="Primer-CSS-Toasts">
    ...
<div>

Example 1: The below example demonstrates the variations of toast in Primer CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
                "width=device-width, initial-scale=1.0" /> 
    <title>Primer CSS Toast</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <div class="m-4 pt-4"> 
        <h1 style="color: green"> 
            GeeksforGeeks 
        </h1> 
        <h2> 
            Primer CSS Toast 
        </h2> 
    </div> 
  
    <div class="p-1"> 
        <div class="Toast Toast--success"> 
            <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"> 
                Thanks for signing up. 
            </span> 
        </div> 
    </div> 
  
    <div class="p-1"> 
        <div class="Toast Toast--warning"> 
            <span class="Toast-icon"> 
                <svg width="16" height="16" 
                     viewBox="0 0 16 16" 
                     class="octicon octicon-alert" 
                     aria-hidden="true"> 
                    <path fill-rule="evenodd"
                        d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138  
                        13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367  
                        0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133  
                        11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z" /> 
                </svg> 
            </span> 
            <span class="Toast-content"> 
                You have 1 warning. 
            </span> 
        </div> 
    </div> 
  
    <div class="p-1"> 
        <div class="Toast Toast--error"> 
            <span class="Toast-icon"> 
                <svg width="14" height="16" 
                     viewBox="0 0 14 16" 
                     class="octicon octicon-stop" 
                     aria-hidden="true"> 
                    <path fill-rule="evenodd"
                        d="M10 1H4L0 5v6l4 4h6l4-4V5l-4-4zm3  
                        9.5L9.5 14h-5L1 10.5v-5L4.5 2h5L13  
                        5.5v5zM6 4h2v5H6V4zm0 6h2v2H6v-2z" /> 
                </svg> 
            </span> 
            <span class="Toast-content"> 
                Don't click here 
            </span> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: The below example demonstrates the toast with a link & the close button in Primer CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0" /> 
    <title> Primer CSS Toast </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <div class="m-4"> 
        <h1 style="color: green"> 
            GeeksforGeeks 
        </h1> 
        <h2> 
            Primer CSS Toast 
        </h2> 
    </div> 
    <div class="p-1"> 
        <div class="Toast"> 
            <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"> 
                Click to  
                <a href="https://www.geeksforgeeks.org/"> 
                    GeeksforGeeks 
                </a> 
            </span> 
            <button class="Toast-dismissButton"> 
                <svg width="12" 
                     height="16"
                     viewBox="0 0 12 16" 
                     class="octicon octicon-x" 
                     aria-hidden="true"> 
                 <path fill-rule="evenodd" 
                       d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75  
                         3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6  
                         6.52l3.75-3.75 1.48 1.48L7.48 8z" />  
                </svg> 
            </button> 
        </div> 
    </div> 
</body> 
</html>