React Toast Overview

    The React 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 React 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 React 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.

    React Toast Example

    Take a look at the simple Ignite UI for React Toast example below. The animated notification message pops up after clicking on the button.

    EXAMPLE
    TSX

    Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

    How To Use Ignite UI for React Toast Notification

    First, you need to the install the corresponding Ignite UI for React npm package by running the following command:

    npm install igniteui-react
    cmd

    You will then need to import the React IgrToast, its necessary CSS, and register its module, like so:

    import { IgrToastModule, IgrToast } from 'igniteui-react';
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    
    IgrToastModule.register();
    tsx

    For a complete introduction to the Ignite UI for React, 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.

    <IgrButton variant="contained" clicked={this.onShowButtonClicked}>
        <span>Show Toast</span>
    </IgrButton>
    
    <IgrToast ref={this.onToastRef}>
        <span>Toast Message</span>
    </IgrToast>
    
    public onToastRef(toast: IgrToast) {
        if (!toast) { return; }
        this.toastRef = toast;
    }
    
    public onShowButtonClicked() {
        if (this.toastRef) {
            this.toastRef.show();
        }
    }
    tsx

    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.

    <div>
        <IgrButton variant="contained" clicked={this.onToggleButtonClicked}>
            <span>Toggle Toast</span>
        </IgrButton>
        <IgrButton variant="contained" clicked={this.onKeepOpenButtonClicked}>
            <span>Toggle keepOpen Property</span>
        </IgrButton>
        <IgrButton variant="contained" clicked={this.onDisplayTimeButtonClicked}>
            <span>Set DisplayTime to 8000</span>
        </IgrButton>
    </div>
    
    <IgrToast ref={this.onToastRef}>
        <span>Toast Message</span>
    </IgrToast>
    
    public onToastRef(toast: IgrToast) {
        if (!toast) { return; }
        this.toastRef = toast;
    }
    
    public onToggleButtonClicked() {
        if (this.toastRef) {
            this.toastRef.toggle();
        }
    }
    
    public onKeepOpenButtonClicked() {
        if (this.toastRef) {
            this.toastRef.keepOpen = !this.toastRef.keepOpen;
        }
    }
    
    public onDisplayTimeButtonClicked() {
        if (this.toastRef) {
            this.toastRef.displayTime = 8000;
        }
    }
    tsx

    EXAMPLE
    TSX

    Ignite UI for React | CTA Banner

    Styling

    You can style the React IgrToast notifications directly using its tag selector:

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

    EXAMPLE
    TSX
    CSS

    API References

    Additional Resources