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 Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

The Alerts are alerts or flash messages to inform us about the status of the actions. The Alerts With Action Button is used to create the flash message with an action button.

Primer CSS Alerts With Action Button Class:

• flush: This class enables the information to be flushed or to notify the status of the actions.
• flash-action: This attribute is used to create the active action.
• flash-warn: This attribute is used to create or notify the warning action 
• flash-error: This attribute is used to create or notify the danger action.
• flash-success: This attribute is used to create or notify the completion of an action.

Syntax:

<div class="flash">
 .....
 <button type="submit" class="btn btn-sm flash-action">
 ....
 </button>
</div>

Example 1: This example demonstrates the use of the Primer CSS Alerts With Action Button.

Output:

👁 Image

Example 2: This example demonstrates the use of the Primer CSS Alerts With Action Button with the SVG icon.

Output:

👁 Image

Reference: https://primer.style/#with-action-button