Web Components Toast Overview

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.

import { defineComponents, IgcToastComponent, IgcButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcToastComponent, IgcButtonComponent);
export class ToastOverview {
    constructor() {
        const toast = document.querySelector('igc-toast') as IgcToastComponent;
    }
}

new ToastOverview();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Toast Overview</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="toast.show()" variant="contained">Show Toast</igc-button>
      <igc-toast id="toast">Toast Message</igc-toast>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="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:

npm install igniteui-webcomponents
cmd

import { defineComponents, IgcToastComponent } from 'igniteui-webcomponents';

defineComponents(IgcToastComponent);
ts

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

The simplest way to display the toast component is to use its show method and call it on a button click.

<igc-button onclick="toast.show()" variant="contained">Show Toast</igc-button>
<igc-toast id="toast">Toast Message</igc-toast>
html

Examples

Properties

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.

<igc-button onclick="toast.toggle()" variant="contained">Toggle Toast</igc-button>
<igc-button onclick="toast.keepOpen = !toast.keepOpen" variant="contained">Toggle keepOpen property</igc-button>
<igc-button onclick="toast.displayTime = 8000" variant="contained">Set DisplayTime to 8000</igc-button>

<igc-toast id="toast">Toast Message</igc-toast>
html

import { defineComponents, IgcToastComponent, IgcButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './ButtonOverviewStyle.css';

defineComponents(IgcToastComponent, IgcButtonComponent);
export class ToastProperties {
    constructor() {
        const toast = document.querySelector('igc-toast') as IgcToastComponent;
    }
}

new ToastProperties();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Toast Properties</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <div class="button-container">
        <igc-button onclick="toast.toggle()" variant="contained">Toggle Toast</igc-button>
        <igc-button onclick="toast.keepOpen = !toast.keepOpen" variant="contained">Toggle keepOpen property</igc-button>
        <igc-button onclick="toast.displayTime = 8000" variant="contained">Set DisplayTime to 8000</igc-button>
      </div>
      <igc-toast id="toast">Toast Message</igc-toast>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>
</html>
html

.button-container {
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Styling

You can style the Web Components IgcToastComponent notifications directly using its tag selector:

igc-toast {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}
css

import { defineComponents, IgcToastComponent, IgcButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './ToastStyling.css';

defineComponents(IgcToastComponent, IgcButtonComponent);
export class ToastStyling {
    constructor() {
        const toast = document.querySelector('igc-toast') as IgcToastComponent;
    }
}

new ToastStyling();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Styled Toast</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="toast.show()" variant="contained">Show Styled Toast</igc-button>
      <igc-toast id="toast">Styled Toast</igc-toast>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-toast {
    background: #011627;
    color: #ECAA53;
    outline-color: #ECAA53;
}css