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.

import {defineComponents, IgcSnackbarComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSnackbarComponent);
export class SnackbarOverview {
    constructor() {
    }
}

new SnackbarOverview();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Snackbar Overview</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="snackbar.show()" variant="contained">Show Snackbar</igc-button>
      <igc-snackbar id="snackbar">Snackbar Message</igc-snackbar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */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.

import {defineComponents, IgcSnackbarComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSnackbarComponent);
export class SnackbarDisplayTime {
    constructor() {
    }
}

new SnackbarDisplayTime();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Snackbar Display Time</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="snackbar.show()" variant="contained">Show Snackbar</igc-button>
      <igc-snackbar id="snackbar" display-time="6000">Snackbar with different display time</igc-snackbar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */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.

import {defineComponents, IgcSnackbarComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSnackbarComponent);
export class SnackbarActionText {
    constructor() {
        const snackbar = document.querySelector('igc-snackbar') as IgcSnackbarComponent;

        document.addEventListener('igcAction', () => {
            snackbar.hide();
        });
    }
}

new SnackbarActionText();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Snackbar Action Text</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="snackbar.show()" variant="contained">Show Snackbar</igc-button>
      <igc-snackbar id="snackbar" keep-open action-text="Close">Snackbar with enabled keep-open option</igc-snackbar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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

import {defineComponents, IgcSnackbarComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SnackbarStyling.css';

defineComponents(IgcSnackbarComponent);
export class SnackbarStyling {
    constructor() {
    }
}

new SnackbarStyling();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Snackbar Styling</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="snackbar.show()" variant="contained">Show Snackbar</igc-button>
      <igc-snackbar id="snackbar">Styled snackbar</igc-snackbar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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