Finder Buy now

Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Bootstrap docs

Basic example

<!-- Basic toast example (remove fade show to hide toast initially) -->
<ngb-toast *ngIf="show" [autohide]="false" (hidden)="show=false">
  <ng-template ngbToastHeader>
    <div class="me-auto">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
        <path d="M16.896 10l-4.896-8-4.896 8-7.104-4 3 11v5h18v-5l3-11-7.104 4zm-11.896 10v-2h14v2h-14zm14.2-4h-14.4l-1.612-5.909 4.615 2.598 4.197-6.857 4.197 6.857 4.615-2.598-1.612 5.909z" />
      
      <div class="d-inline-block align-middle bg-primary rounded-1 me-2" style="width: 1.25rem; height: 1.25rem;"></div>
      <h6 class="fs-sm mb-0 me-auto">Bootstrap</h6>
      <small class="text-muted">11 mins ago</small>
    </div>
  
  </ng-template>
  Hello, world! This is a toast message.
</ngb-toast>

Color variations

<!-- Primary toast -->
<ngb-toast *ngIf="show" [autohide]="false" (hidden)="show=false">
  <ng-template ngbToastHeader class="toast-header bg-primary text-white">
    <div class="me-auto">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
        <path d="M16.896 10l-4.896-8-4.896 8-7.104-4 3 11v5h18v-5l3-11-7.104 4zm-11.896 10v-2h14v2h-14zm14.2-4h-14.4l-1.612-5.909 4.615 2.598 4.197-6.857 4.197 6.857 4.615-2.598-1.612 5.909z" />
      
      <i class="fi-bell me-2"></i>
      <span class="fw-bold me-auto">Primary toast</span>
    </div>
  </ng-template>
  <div class="toast-body text-primary">Hello, world! This is a toast message.</div>
</ngb-toast>

<!-- Accent toast -->
<ngb-toast *ngIf="show" [autohide]="false" (hidden)="show=false">
  <ng-template ngbToastHeader class="toast-header bg-accent text-white">
    <div class="me-auto">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
        <path d="M16.896 10l-4.896-8-4.896 8-7.104-4 3 11v5h18v-5l3-11-7.104 4zm-11.896 10v-2h14v2h-14zm14.2-4h-14.4l-1.612-5.909 4.615 2.598 4.197-6.857 4.197 6.857 4.615-2.598-1.612 5.909z" />
      
      <i class="fi-lock me-2"></i>
      <span class="fw-bold me-auto">Accent toast</span>
    </div>
  </ng-template>
  <div class="toast-body text-accent">Hello, world! This is a toast message.</div>
</ngb-toast>

<!-- Success toast -->
<ngb-toast *ngIf="show" [autohide]="false" (hidden)="show=false">
  <ng-template ngbToastHeader class="toast-header bg-success text-white">
    <div class="me-auto">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
        <path d="M16.896 10l-4.896-8-4.896 8-7.104-4 3 11v5h18v-5l3-11-7.104 4zm-11.896 10v-2h14v2h-14zm14.2-4h-14.4l-1.612-5.909 4.615 2.598 4.197-6.857 4.197 6.857 4.615-2.598-1.612 5.909z" />
      
      <i class="fi-lock me-2"></i>
      <span class="fw-bold me-auto">Accent toast</span>
    </div>
  </ng-template>
  <div class="toast-body text-success">Hello, world! This is a toast message.</div>
</ngb-toast>

<!-- Danger toast -->
<ngb-toast *ngIf="show" [autohide]="false" (hidden)="show=false">
  <ng-template ngbToastHeader class="toast-header bg-danger text-white">
    <div class="me-auto">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
        <path d="M16.896 10l-4.896-8-4.896 8-7.104-4 3 11v5h18v-5l3-11-7.104 4zm-11.896 10v-2h14v2h-14zm14.2-4h-14.4l-1.612-5.909 4.615 2.598 4.197-6.857 4.197 6.857 4.615-2.598-1.612 5.909z" />
      
      <i class="fi-x-circle me-2"></i>
      <span class="fw-bold me-auto">Danger toast</span>
    </div>
  </ng-template>
  <div class="toast-body text-danger">Hello, world! This is a toast message.</div>
</ngb-toast>

<!-- Warning toast -->
<ngb-toast *ngIf="show" [autohide]="false" (hidden)="show=false">
  <ng-template ngbToastHeader class="toast-header bg-warning text-white">
    <div class="me-auto">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
        <path d="M16.896 10l-4.896-8-4.896 8-7.104-4 3 11v5h18v-5l3-11-7.104 4zm-11.896 10v-2h14v2h-14zm14.2-4h-14.4l-1.612-5.909 4.615 2.598 4.197-6.857 4.197 6.857 4.615-2.598-1.612 5.909z" />
      
      <i class="fi-x-circle me-2"></i>
      <span class="fw-bold me-auto">Warning toast</span>
    </div>
  </ng-template>
  <div class="toast-body text-warning">Hello, world! This is a toast message.</div>
</ngb-toast>

<!-- Info toast -->
<ngb-toast *ngIf="show" [autohide]="false" (hidden)="show=false">
  <ng-template ngbToastHeader class="toast-header bg-info text-white">
    <div class="me-auto">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
        <path d="M16.896 10l-4.896-8-4.896 8-7.104-4 3 11v5h18v-5l3-11-7.104 4zm-11.896 10v-2h14v2h-14zm14.2-4h-14.4l-1.612-5.909 4.615 2.598 4.197-6.857 4.197 6.857 4.615-2.598-1.612 5.909z" />
      
      <i class="fi-x-circle me-2"></i>
      <span class="fw-bold me-auto">Info toast</span>
    </div>
  </ng-template>
  <div class="toast-body text-warning">Hello, world! This is a toast message.</div>
</ngb-toast>

<!-- Dark toast -->
<ngb-toast *ngIf="show" [autohide]="false" (hidden)="show=false">
  <ng-template ngbToastHeader class="toast-header bg-dark text-white">
    <div class="me-auto">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
        <path d="M16.896 10l-4.896-8-4.896 8-7.104-4 3 11v5h18v-5l3-11-7.104 4zm-11.896 10v-2h14v2h-14zm14.2-4h-14.4l-1.612-5.909 4.615 2.598 4.197-6.857 4.197 6.857 4.615-2.598-1.612 5.909z" />
      
      <i class="fi-x-circle me-2"></i>
      <span class="fw-bold me-auto">Dark toast</span>
    </div>
  </ng-template>
  <div class="toast-body text-warning">Hello, world! This is a toast message.</div>
</ngb-toast>

<!-- Custom color toast -->
<ngb-toast *ngIf="show" [autohide]="false" (hidden)="show=false">
  <ng-template ngbToastHeader class="toast-header border-0 text-white">
    <div class="me-auto">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
        <path d="M16.896 10l-4.896-8-4.896 8-7.104-4 3 11v5h18v-5l3-11-7.104 4zm-11.896 10v-2h14v2h-14zm14.2-4h-14.4l-1.612-5.909 4.615 2.598 4.197-6.857 4.197 6.857 4.615-2.598-1.612 5.909z" />
      
      <i class="fi-map-pin me-2"></i>
      <span class="fw-bold me-auto">Custom color toast</span>
    </div>
  </ng-template>
  <div class="toast-body text-warning">Hello, world! This is a toast message.</div>
</ngb-toast>
Top