zToaster
Basic toasts
ztoast("Lorem ipsum dolor sit amet, consectetur adipisicing elit."); // With title ztoast("Lorem ipsum dolor sit amet, consectetur adipisicing elit.", {title: "Hello notification!"});
Show basic toast
Show basic toast with title
Types of notifications
// success ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, {type: "success"}); // error ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, {"type": "error"}); // info ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, {type: "info"}); // warning ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, {"type": "warning"}); // dark ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, {"type": "dark"});
Toast success
Toast error
Toast info
Toast warning
Toast dark
Positions
// top-right ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, { title: "This is the title", position: "top-right" }); // top-left ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, { title: "This is the title", position: "top-left" }); // top-center ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, { title: "This is the title", position: "top-center" }); // top-full ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, { title: "This is the title", position: "top-full" });
Toast top right
Toast top left
Toast top center
Toast top full
// bottom-right ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, { title: "This is the title", position: "bottom-right" }); // bottom-left ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, { title: "This is the title", position: "bottom-left" }); // bottom-center ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, { title: "This is the title", position: "bottom-center" }); // bottom-full ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, { title: "This is the title", position: "bottom-full" });
Toast bottom right
Toast bottom left
Toast bottom center
Toast bottom full
ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, { title: "This is the title", newerOnTop: false, });
Newer on bottom
Duration
// It will stay until you close the toast ztoast(`You better click on the close button...`, { title: "I'll stay forever", duration: 0, }); // Short duration ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, { title: "I'll stay 1 second...", duration: 1000, }); // Long duration ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, { title: "I'll stay 5 seconds...", duration: 5000, });
Infinite toast
1 second toast
5 seconds toast
Customize
Icons
// Without icon ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, { title: "This is the title", showIcon: false, }); // Set custom icon ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, { title: "This is the title", icon: "♺" // HTML Unicode symbols }); // Hide close icon ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, { "title": "This is the title", "showClose": false, });
Open toast without icon
Open toast custom icon
Open toast without close icon
Styles
// Background and text color ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, { title = "I'm a pink toast", textColor: "#666", backgroundColor: "pink", }); // Size ztoast(`Lorem ipsum dolor sit amet, consectetur adipisicing elit.`, { title: "I'm a big toast!", width: "600px", });
Pink toast
Bigger toast
