Web Components Toast
The Ignite UI for Web Components Toast component is primarily used for system messaging, push notifications, warning messages, and information. It cannot be dismissed by the user.
Ignite UI for Web Components Toast Example
This sample demonstrates how to create IgcToastComponent
component.
Usage
First, you need to install the Ignite UI for Web Components by running the following command:
npm install igniteui-webcomponents
import { defineComponents, IgcToastComponent } from 'igniteui-webcomponents';
defineComponents(IgcToastComponent);
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>
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>
Styling
You can style the toast using it's directly its tag selector:
igc-toast {
background: #011627;
color: #ECAA53;
outline-color: #ECAA53;
}