Toast / Notification

Toast Types

Four built-in severity levels with distinct styling and icons.

Code
<button mat-raised-button color="primary" (click)="showSuccess()">Success</button>
<button mat-raised-button color="warn" (click)="showError()">Error</button>
<button mat-raised-button (click)="showInfo()">Info</button>
<button mat-raised-button (click)="showWarning()">Warning</button>
<button mat-raised-button (click)="dismissAll()">Dismiss All</button>

Custom Duration

Override the default auto-dismiss duration per toast.

Code
<div style="display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;">
  <mat-form-field appearance="outline" style="flex:1;min-width:200px;">
    <mat-label>Message</mat-label>
    <input matInput [(ngModel)]="customMessage" />
  </mat-form-field>
  <mat-form-field appearance="outline" style="width:140px;">
    <mat-label>Duration (ms)</mat-label>
    <input matInput type="number" [(ngModel)]="customDuration" />
  </mat-form-field>
  <button mat-raised-button color="primary" (click)="showCustom()">Show Custom</button>
</div>

Default Configuration

Override global toast defaults via the RUI_TOAST_DEFAULT_OPTIONS injection token in your app config.

Code
<!-- Default config is set via provider -->

Position

Place toasts at any corner or edge of the viewport.

Code
@for (pos of positions; track pos) {
  <button mat-icon-button [matTooltip]="pos" [aria-label]="pos" (click)="showAtPosition(pos)">
    <mat-icon>{{ positionIcons[pos] }}</mat-icon>
  </button>
}