Alert
Alerts are used to attract user's attention for important information without interrupting the user's flow.
Filled alerts
The alert offers four severity levels that set a distinctive icon and color.
This is an info alert!
This is an success alert!
This is an warning alert!
This is a error alert!
Code Snippets
This is an info alert!
This is an success alert!
This is an warning alert!
This is a error alert!
Outlined alerts
This is a primary alert!
This is an info alert!
This is an success alert!
This is an warning alert!
This is a error alert!
Code Snippets
This is a primary alert!
This is an info alert!
This is an success alert!
This is an warning alert!
This is a error alert!
Demo transition alert with close button
You can use a transition component such as transition-alert to transition the appearance of the
alert. Click on close icon to see the transition.
This is an success alert!
Code Snippets
HTML snippet
This is an success alert!
JS snippet
/*----------TRANSITION ALERT------------*/
const transitionAlert = document.querySelector(".transition-alert");
const demoClose = document.querySelector(".demo-close");
const reopenBtn = document.querySelector(".reopen-alert");
demoClose.addEventListener("click", () => {
transitionAlert.classList.add("removeTransition");
transitionAlert.addEventListener("transitionend", (e) => {
transitionAlert.style.display = "none";
});
});
reopenBtn.addEventListener("click", () => {
transitionAlert.classList.remove("removeTransition");
transitionAlert.style.display = "flex";
});