Blaze UI Alerts Attributes
Last Updated :
25 Apr, 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.
There are two attributes offered by Blaze UI alert:
- open: open/close the state of the alert, initially it is set to open. The type of this attribute is boolean.
- dismissible: Allow the alert to be closed. The type of this attribute is boolean.
Blaze-UI Alert Class:
- blaze-alert: This class is used to add the alert message.
Syntax:
<blaze-alert open dismissible ...>
...
</blaze-alert>
Example 1: The following code demonstrates the Blaze UI alerts open attribute.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<link rel="stylesheet" href=
<style>
.Logo {
color: green;
}
</style>
</head>
<body>
<h1 class="Logo">
GeeksforGeeks
</h1>
<h2>
Blaze UI Alerts open attribute
</h2>
<br />
<blaze-alert open>Hello Geek</blaze-alert>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the Blaze UI alerts dismissible attribute. The dismissible attribute adds the close option at the corner of the alert.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<link rel="stylesheet" href=
<style>
.Logo {
color: green;
}
</style>
</head>
<body>
<h1 class="Logo">
GeeksforGeeks
</h1>
<h2>
Blaze UI Alerts open and dismissible attribute
</h2>
<br />
<blaze-alert open dismissible>
Hello Geek
</blaze-alert>
<blaze-alert open dismissible type="success">
Site: GeeksforGeeks
</blaze-alert>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/components/alerts/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...