Open In App

Primer CSS Alerts With Dismiss

Improve
Improve
Like Article
Like
Save
Share
Report

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.

In this article, we will learn about Primer CSS Alerts with Dismiss.

Primer CSS Alerts with Dismiss adds a close icon on the right of the flash message which allows the users to dismiss the flash message

flash-color-class: These classes are used to provide different colors to the alerts like:

  • flash-warn: This class is used to change the color to yellow.
  • flash: This class is used to change the color to blue.
  • flash-error: This class is used to change the color to red.
  • flash-success: This class is used to change the color to green.

Syntax:

<div class="flash {flash-color-class}>
    <button class=" flash-close js-flash-close" 
        type="button" aria-label="Close">
        {Icon}
    </button>
</div>

Icon: To provide dismiss icons we can any SVG, CSS icons, etc.

Let’s learn more about this with examples

Example 1: In this example, we will use SVG icons to create alerts. Then these SVG icons are written under the <button> tag. On clicking this button, we will trigger the function to close the alert:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" 
        rel="stylesheet" />
    <link rel="stylesheet" href=
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
      
    <h3> Alert With Dismiss</h3>
      
    <div class="flash" id="f-info" style="width:50%">
        Hi Geeks ! I am an Informative Alert
        <button class="flash-close js-flash-close" 
            type="button" aria-label="Close" 
            onclick="closeAlert()">
              
            <!-- <%= octicon "x" %> -->
            <svg class="octicon octicon-x" 
                xmlns="http://www.w3.org/2000/svg" 
                viewBox="0 0 16 16" width="16"
                height="16">
                <path fill-rule="evenodd" clip-rule="evenodd" 
                    d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 
                    6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555
                    3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 
                    3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 
                    4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 
                    12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 
                    12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 
                    12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782
                    12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 
                    11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 
                    3.57955 3.86063 3.72 3.72Z">
                </path>
            </svg>
        </button>
    </div>
  
    <div class="flash mt-3 flash-warn" id="f-warn" 
        style="width:50%">
        Hi Geeks ! I am an Warning Alert
        <button class="flash-close js-flash-close" 
            type="button" aria-label="Close" 
            onclick="closeWarningAlert()">
  
            <!-- <%= octicon "x" %> -->
            <svg class="octicon octicon-x" 
                xmlns="http://www.w3.org/2000/svg" 
                viewBox="0 0 16 16" width="16"
                height="16">
                <path fill-rule="evenodd" clip-rule="evenodd" 
                    d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887
                    3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 
                    3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 
                    12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537
                    11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 
                    12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 
                    11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 
                    12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72
                    4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z">
                </path>
            </svg>
        </button>
    </div>
  
    <script>
        function closeAlert() {
            document.getElementById("f-info").style.display = "none";
  
        }
        function closeWarningAlert() {
            document.getElementById("f-warn").style.display = "none";
        }
    </script>
</body>
  
</html>


Output:

 

Example 2: In this example, we will use CSS icons to dismiss Alerts box.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
        rel="stylesheet" />
    <link rel="stylesheet" href=
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
      
    <h3> Alert With Dismiss</h3>
  
    <div class="flash flash-success" 
        style="width:50%" id="f-success">
        Hi Geek!! I am a Success Alert
        <button class="flash-close js-flash-close" 
            type="button" aria-label="Close" 
            onclick="closeSuccessAlert()">
            <i class="glyphicon glyphicon-remove" 
                style="color: red;"></i>
        </button>
    </div>
  
    <div class="flash flash-error" 
        style="width:50%" id="f-error">
        Hi Geek!! I am an Error Alert
        <button class="flash-close js-flash-close" 
            type="button" aria-label="Close" 
            onclick="closeErrorAlert()">
            <i class="glyphicon glyphicon-remove" 
                style="color: red;"></i>
        </button>
    </div>
  
    <script>
        function closeSuccessAlert() {
            document.getElementById("f-success")
                .style.display = "none";
        }
  
        function closeErrorAlert() {
            document.getElementById("f-error")
                .style.display = "none";
        }
    </script>
</body>
  
</html>


Output:

 

References: https://primer.style/css/components/alerts#with-dismiss



Last Updated : 13 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads