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 Snackbar component.

Usage

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

npm install igniteui-webcomponents

Before using the Snackbar, you need to register it as follows:

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

defineComponents(IgcSnackbarComponent);

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>

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 to give you full control over its styling:

igc-snackbar::part(base) {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
  color: white;
}

API References

Additional Resources

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub