Primer CSS Alerts

Last Updated : 28 Jun, 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. It is highly reusable and flexible. It is created with GitHub’s design system.

Alerts are used to signify an important message to the user. It alerts the user related to some pending items or new features on the web page. Users are informed beforehand through alerts before they interact with the web page. There are different ways of defining an alert.

Default: This is used to define a simple blue rounded flash using class flash.
With colors: This is used to give different colors to flash using flash-warn, flash-error, and flash-success classes.
With icon: This is used to add icons to alerts.
With dismiss: This is used to add a closing icon to alerts using the flash-close class.
With action button: This is used to add action buttons to alerts using the flash-action class.
Full-width flash: This makes a full width no border alert using the flash-full class.
Flash banner: This makes the alert fixed to the top of the page using the flash-banner class.

Syntax:

<div class="flash">
    ...
</div>

Example 1: This example demonstrates the different types of Primer CSS alerts using the flash class.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title> Primer CSS Alerts</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
 
<body>
    <div class="flash flash-banner">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h4>Flash banner defined</h4>
    </div>
    <div style="margin:150px;">
        <div class="flash">
            Default Flash defined.
        </div>
        <div class="flash mt-3 flash-warn">
            Warning Flash defined.
        </div>
 
        <div class="flash flash-full mt-3 flash-error">
            Error Full width flash defined.
        </div>
 
        <div class="flash mt-3 flash-success">
            Success Flash with action defined.
            <button type="submit" class="btn btn-sm flash-action">
               Click to perform an action
            </button>
        </div>
    </div>
</body>
</html>

Output:

Primer CSS Alerts

Example 2: This example demonstrates the different types of Primer CSS alerts using the flash class.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title> Primer CSS Alerts</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<style>
    h1{
        color:green;
    }
    body{
        background-color:lightgrey;
    }
</style>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
   <div class="flash">
  Flash message with action here.
  <button type="submit" class="btn btn-sm flash-action">Complete action</button>
</div>
 
<div class="flash mt-3 flash-warn">
  Flash message with action here.
  <button class="btn btn-sm flash-action" type="submit">Complete action</button>
</div>
 
<div class="flash mt-3 flash-error">
  Flash message with action here.
  <button class="btn btn-sm flash-action" type="submit">
    <svg class="octicon" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16" width="16" height="16">
        <path fill-rule="evenodd"
            d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 
        0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 
        0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 
        10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 
        1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 
        01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z">
        </path>
    </svg>
    Complete action
  </button>
</div>
 
<div class="flash mt-3 flash-success">
  <svg class="octicon" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16" width="16" height="16">
    <path d="M5.75 7.5a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 
    0v-1.5a.75.75 0 01.75-.75zm5.25.75a.75.75 0 00-1.5 
    0v1.5a.75.75 0 001.5 0v-1.5z">
    </path>
    <path fill-rule="evenodd" d="M6.25 0a.75.75 0 000 
    1.5H7.5v2H3.75A2.25 2.25 0 001.5 5.75V8H.75a.75.75 0 000 
    1.5h.75v2.75a2.25 2.25 0 002.25 2.25h8.5a2.25 2.25 0 
    002.25-2.25V9.5h.75a.75.75 0 000-1.5h-.75V5.75a2.25 2.25 
    0 00-2.25-2.25H9V.75A.75.75 0 008.25 0h-2zM3 5.75A.75.75 
    0 013.75 5h8.5a.75.75 0 01.75.75v6.5a.75.75 0 
    01-.75.75h-8.5a.75.75 0 01-.75-.75v-6.5z">
    </path>
  </svg>
  Flash message with action here.
  <button class="btn btn-sm flash-action" type="submit">
    <svg class="octicon" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16" width="16" height="16">
        <path fill-rule="evenodd" d="M2 2.75C2 1.784 2.784 1 
        3.75 1h2.5a.75.75 0 010 
        1.5h-2.5a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 
        0 010 1.5h-2.5A1.75 1.75 0 012 13.25V2.75zm10.44 4.5H6.75a.75.75 
        0 000 1.5h5.69l-1.97 1.97a.75.75 0 101.06 
        1.06l3.25-3.25a.75.75 0 000-1.06l-3.25-3.25a.75.75 0 
        10-1.06 1.06l1.97 1.97z">
        </path>
    </svg>
    Complete action
  </button>
</div>
</center>
</body>
</html>