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 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 discuss Primer CSS Alerts with icons. Primer CSS Alerts with the icon to add an icon to the left of the flash message. It gives funky fresh attention.

Example 1: In this example, we will use SVG icons with alerts. We will create different SVG icons like a warning.

Output:

👁 Image

Example 2: In this example, we will use CSS icons as icons in alerts. We will display two types of alerts with icons i.e error and success

Output:      

👁 Image

Reference: https://primer.style/#with-icon