Blaze UI Alerts

Last Updated : 30 Jun, 2022

Blaze UI is a framework-free open source UI toolkit that uses JavaScript components to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. This framework allows us to use various of its styles and properties to make a website more user-friendly.

Blaze UI allows showing the alert messages on the website using predefined classes. These alerts can be used to show the messages regarding the website such as errors, and success messages.

Blaze UI Alert Attributes: Blaze UI allows showing the alert messages on the website using predefined classes. These alerts can be used to show the messages regarding the website such as errors, and success messages.
Blaze UI Alert Methods: Blaze UI Alert methods are used to notify the user about some action to be taken or have taken place. We can show and hide the alerts programmatically as well.
Blaze-UI Alert Class: The classes are used to create the components, there is only
- blaze-alert: This class is used to add the alert message.

Syntax:

<div>
    <blaze-alert open type=" ..." ...>
        ...
    </blaze-alert>
</div>

Example 1: The following code demonstrates the Blaze UI Alerts.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
    <link rel="stylesheet"
          href="styles.css"/>
    <script type="module"
            src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
    <script nomodule=""
            src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
    </script>
    <link rel="stylesheet"
          href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h2>
        Blaze UI Alerts
    </h2>
    <br/>
    <blaze-alert open dismissible>
        Hello Geek
    </blaze-alert>
    <blaze-alert open dismissible type="info">
        Site: GeeksforGeeks
    </blaze-alert>
</body>
</html>

Output:

Blaze UI Alerts

Example 2: The following code demonstrates the Blaze UI Alerts of type warning, success, error, and brand.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
    <link rel="stylesheet"
          href="styles.css"/>
    <script type="module"
            src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
    <script nomodule=""
            src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
    </script>
    <link rel="stylesheet"
          href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h2>
        Blaze UI Alerts
    </h2>
    <br/>
    <blaze-alert open dismissible 
                 type="warning">
        Warning
    </blaze-alert>
    <blaze-alert open dismissible 
                 type="success">
        Success
    </blaze-alert>
    <blaze-alert open dismissible 
                 type="error">
        Error
    </blaze-alert>
    <blaze-alert open dismissible 
                 type="brand">
        Brand
    </blaze-alert>
</body>
</html>