Primer CSS Alerts 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. 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:

Output:

👁 Image

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

Output:

👁 Image

References: https://primer.style/#with-dismiss