Components

Snackbar

Angular Material Snackbar displays brief messages at various positions on the screen to provide contextual feedback. It slides in over the page, carries a short message and an optional action button, and either stays until it is dismissed or disappears on its own after a few seconds. BuilderKit restyles the surface, the message and the action so the snackbar matches the rest of the design system.

Official docs API reference

For feedback that has to be read and answered before anything else happens, the dialog component blocks the page instead of passing by.

Example

Below is an example of how BuilderKit restyles the Angular Material Snackbar and gives it a more modern appearance.

<button matButton (click)="openSnackBar('Disco party!', 'Dance')">
  Show snack-bar
</button>

Positioning the snackbar on the screen

A snackbar can slide in from any corner or from the middle of the top or the bottom edge, so it lands where it is least likely to cover what is being worked on.

<button matButton (click)="openPositionedSnackBar('center', 'top')">
  Top center
</button>

Dismissing the snackbar automatically

Without an action to take, a snackbar is better off leaving by itself after a few seconds rather than waiting to be closed.

<button matButton (click)="openTimedSnackBar('Saved to your drafts')">
  Show snack-bar
</button>