Snackbar

Use the Snackbar Component to show a short notification or provide indication for the most recent action such as adding or deleting a record in a listing, with the option to trigger a simple extra action such as undo. The Snackbar is visually identical to the Ignite UI for Angular Snackbar Component

Snackbar Demo

Styling

The Snackbar comes with constrained styling flexibility, allowing only to change the text color of its action button.

Usage

The Snackbar always appears on top of other content, so avoid placing on top of the main application navigation. Pick an emphasizing style for its action button that contrasts it with the message and avoid stacking multiple Snackbars in a column - show only the most recent one instead.

Do	Don't

Code generation

This section describes some important overrides and how they affect code generation.

Warning

Triggering Detach from Symbol on an instance of the Snackbar in your design is very likely to result in loss of code generation capability for the Snackbar.

Event Property

When supplied the 🕹️Event Event property is used to create a method in the component TypeScript and add an onAction signature in the HTML of the Snackbar. When supplied the event must be specified using the curly braces format: {onEventName}

Text

There are Text properties for the Message and Button. These properties may contain text, binding text, or a combination of the two, examples:

Settings
{settingsLabel}
Important {labelText}