The Web Components Toast is a super lightweight and small pop-up component that is used for displaying a message content, notifying end-users about the status of a changed record. You can easily position and show Web Components toast notifications at the bottom or at any other specified area of the screen. Or you can also dismiss them in a simple and easy way.
The Web Components Toast component is primarily used for system messaging, push notifications, warning messages, and information. It cannot be dismissed by the user. This control has different features like animation effects, display time property to configure how long the toast component is visible, styling, and others.
Web Components Toast Example
Take a look at the simple Ignite UI for Web Components Toast example below. The animated notification message pops up after clicking on the button.
<!DOCTYPE html><html><head><title>Toast Overview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-buttononclick="toast.show()"variant="contained">Show Toast</igc-button><igc-toastid="toast">Toast Message</igc-toast></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
How To Use Ignite UI for Web Components Toast Notification
First, you need to install the Ignite UI for Web Components by running the following command:
Use the displayTime property to configure how long the toast component is visible. By default, it's set to 4000 milliseconds.
By default, the toast component is hidden automatically after a period specified by the displayTime. You can use keepOpen property to change this behavior. In this way, the toast will remain visible.
<!DOCTYPE html><html><head><title>Toast Properties</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><divclass="button-container"><igc-buttononclick="toast.toggle()"variant="contained">Toggle Toast</igc-button><igc-buttononclick="toast.keepOpen = !toast.keepOpen"variant="contained">Toggle keepOpen property</igc-button><igc-buttononclick="toast.displayTime = 8000"variant="contained">Set DisplayTime to 8000</igc-button></div><igc-toastid="toast">Toast Message</igc-toast></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
<!DOCTYPE html><html><head><title>Styled Toast</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-buttononclick="toast.show()"variant="contained">Show Styled Toast</igc-button><igc-toastid="toast">Styled Toast</igc-toast></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css