Primer CSS Alerts With Action Button

Last Updated : 12 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.

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Alerts With Action Button </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />  
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Alerts With Action Button </h3> 
    </div> 
    <br> 
    <div class="flash"> GeeksforGeeks Alert 
        <button type="submit" 
                class="btn btn-sm flash-action">  
                Action Button  
        </button> 
    </div> 
</body> 
</html>

Output:

Primer CSS Alerts With Action Button

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Alerts With Action Button </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Alerts With Action Button </h3> 
    </div> 
    <br> 
    <div class="flash"> GeeksforGeeks Alert 1 
        <button type="submit" 
                class="btn btn-sm flash-action"> 
            <svg class="octicon" 
                 viewBox="0 0 16 16" 
                 width="18" 
                 height="18"> 
                <path fill-rule="evenodd"
                      d="M11.5 7a4.499 4.499 0 11-8.998  
                      0A4.499 4.499 0 0111.5 7zm-.82 4.74a6  
                      6 0 111.06-1.06l3.04 3.04a.75.75 0  
                      11-1.06 1.06l-3.04-3.04z">  
                </path> 
            </svg> Action Button 1  
        </button> 
    </div> 
    <div class="flash mt-4 flash-success"> GeeksforGeeks Alert 2 
        <button type="submit" 
                class="btn btn-sm flash-action"> 
            <svg class="octicon" 
                 viewBox="0 0 16 16" 
                 width="18" 
                 height="18"> 
                <path fill-rule="evenodd" 
                      d="M13.78 4.22a.75.75 0 010 1.06l-7.25  
                      7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0  
                      011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z">  
                </path> 
            </svg> Action Button 2  
        </button> 
    </div> 
</body> 
</html>