Primer CSS Alerts With Dismiss
Last Updated :
13 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. 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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</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
Similar Reads
Primer CSS Alerts With Icon
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
2 min read
Primer CSS Toast with Dismiss
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
3 min read
Primer CSS Alerts Full Width Flash
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
2 min read
Primer CSS Boxes with Flash Alerts
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
3 min read
Primer CSS Alerts
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. It is highly reusable and flexible. It is created with GitHub’s design system. Alerts are used to signify an important message to t
3 min read
Primer CSS Alerts Default
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
2 min read
Primer CSS Alerts Color
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
2 min read
Primer CSS Alerts With Action Button
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
3 min read
Primer CSS Alerts Flash Banner
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
2 min read
Primer CSS Details Custom Caret
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
2 min read