Primer CSS Toast with Dismiss

Last Updated : 03 Jun, 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.

Primer CSS Toast with dismiss is used to create an interface where the user is allowed to explicitly dismiss a Toast. To create that interface you need to add Toast-dismissButton class under the Toast class.

Primer CSS Toast With Dismiss Class:

Toast-dismissButton: This class is used to allow a user to explicitly dismiss a Toast.

Syntax:

<div class="Toast Toast--animateIn">
     ...
    <button class="Toast-dismissButton">
      ...
    </button>
</div>

The below examples illustrate the Primer CSS Toast with Dismiss.

Example 1: In this example, we will use animate in animation on Toast with Dismiss.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Primer CSS Toast with Dismiss</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
 
<body>
    <div class="text-center">
        <h1 class="color-fg-success"> 
            GeeksforGeeks 
        </h1>
         
        <h3>Primer CSS Toast With Dismiss</h3>
    </div>
 
    <div class="d-flex flex-justify-center">
        <div class="Toast Toast--animateIn">
            <span class="Toast-icon">
                <svg class="octicon"
                    xmlns="https://www.geeksforgeeks.org/"
                    viewBox="0 0 15 15" width="25" height="25">
                    <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25
                    7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0
                    011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z">
                    </path>
                </svg>
            </span>
 
            <span class="Toast-content">
                GeeksforGeeks Loaded Successful
            </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>

Output:

Example 2: In this example, we will not use any animation on Toast with Dismiss.

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
 
<body>
    <div class="text-center">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3> Primer CSS Toast With Dismiss </h3>
    </div>
     
    <div class="d-flex flex-justify-center">
        <div class="Toast">
            <span class="Toast-icon">
                <svg width="16" height="16" fill="currentColor"
                     class="Toast--spinner bi bi-arrow-repeat"
                           viewBox="0 0 16 16">
                     <path
                       d="M11.534 7h3.932a.25.25 .192.41l-1.966 
                       2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 
                       0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 
                       6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
   
                     <path fill-rule="evenodd"
                        d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 
                        0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 
                        7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002
                        0 0 0 8.757 2.182.5.5 0 1 
                        1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
                </svg>
            </span>
            <span class="Toast-content">
                  Cancel your loading
            </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>