Web Components Snackbar

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

    Ignite UI for Web Components Snackbar Example

    This sample demonstrates how to create IgcSnackbarComponent component.

    EXAMPLE
    TS
    HTML
    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.

    Usage

    First, you need to install the Ignite UI for Web Components by running the following command:

    npm install igniteui-webcomponents
    cmd
    import { defineComponents, IgcSnackbarComponent } from 'igniteui-webcomponents';
    
    defineComponents(IgcSnackbarComponent);
    ts

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

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

    Examples

    Display Time

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

    EXAMPLE
    TS
    HTML
    CSS

    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.

    EXAMPLE
    TS
    HTML
    CSS

    Ignite UI for Web Components | CTA Banner

    Styling

    The IgcSnackbarComponent component exposes several CSS parts to give you full control over its styling:

    Name Description
    base The base wrapper of the snackbar component.
    message The snackbar message.
    action The default snackbar action button.
    action-container The area holding the actions.
    igc-snackbar::part(base) {
      background: var(--ig-primary-500);
      border-color: var(--ig-primary-800);
      color: white;
    }
    css

    EXAMPLE
    TS
    HTML
    index.css
    SnackbarStyling.css

    API References

    Additional Resources