React Snackbar

    The Ignite UI for React Snackbar component is used to provide feedback about an operation by showing a brief message at the bottom of the screen.

    Ignite UI for React Snackbar Example

    This sample demonstrates how to create IgrSnackbar component.

    Usage

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

    npm install igniteui-react

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

    import { IgrSnackbarModule, IgrSnackbar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrSnackbarModule.register();

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

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

    <IgrButton variant="contained" clicked={this.onShowButtonClicked}>
    <span>Show Snackbar</span>
</IgrButton>
<IgrSnackbar ref={this.onSnackbarRef}>
    <span>Snackbar Message</span>
</IgrSnackbar>

public onSnackbarRef(snackbar: IgrSnackbar) {
    if (!snackbar) { return; }
    this.snackbarRef = snackbar;
}
public onShowButtonClicked() {
    if (this.snackbarRef) {
        this.snackbarRef.show();
    }
}

    Examples

    Display Time

    Use the displayTime property to configure how long the snackbar component is visible. By default, it's set to 4000 milliseconds.

    Action Text

    By default, the snackbar component is hidden automatically after a period specified by the displayTime. You can use keepOpen property to change this behavior. In this way, the snackbar will remain visible. Using the snackbar actionText you can display an action button inside the component.

    Styling

    The snackbar component exposes several CSS parts (base, message, and action) to give you full control over its styling.

    igc-snackbar::part(base) {
    background: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

    API References

    Additional Resources