Taiga UI 5.0 is out!

Notification CORE

Examples API GitHub

On this page

A notification message that can be displayed inline or as an alert

Basic

Various sizes, visual options and content examples
Hello world
I am title
I am content of the notification and I can even wrap to multiple lines.
Most boring notification 
    
      
    

      
      
    

  
    
      <div
    size="l"
    tuiNotification
>
    Hello world
    <button
        iconStart="@tui.x"
        tuiIconButton
        type="button"
    >
        Close
    </button>
</div>

<div
    appearance="warning"
    size="m"
    tuiNotification
>
    <div
        tuiTitle
        [style.padding-inline-end.rem]="2"
    >
        I am title
        <div tuiSubtitle>I am content of the notification and I can even wrap to multiple lines.</div>
        <div>
            <button
                tuiButton
                type="button"
            >
                So what?
            </button>
            <button
                tuiLink
                type="button"
            >
                Whatever
            </button>
        </div>
    </div>
    <button
        iconStart="@tui.x"
        tuiIconButton
        type="button"
    >
        Close
    </button>
</div>

<div
    appearance="neutral"
    icon=""
    size="s"
    tuiNotification
>
    Most boring notification
</div>

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

Options

Using DI to set default values
Works with token options
    
      
    

      
      
    

  
    
      <div tuiNotification>Works with token options</div>

Interactive

Interactive tags and visual customization
Toasts A notification as a toast
    
      
    

      
      
    

  
    
      <button
    appearance="neutral"
    icon="@tui.heart"
    iconEnd="@tui.chevron-right"
    size="m"
    tuiNotification
    type="button"
>
    <span tuiTitle>
        Custom icon color
        <span tuiSubtitle>Vertically centered</span>
    </span>
</button>

<a
    iconEnd="@tui.chevron-right"
    size="l"
    tuiNotification
    [routerLink]="routes.Toast"
>
    <span tuiTitle>
        Toasts
        <span tuiSubtitle>A notification as a toast</span>
    </span>
</a>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

:host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

button[tuiNotification]::before {
    .center-top();

    color: var(--tui-text-negative);
}

Directive

Using directive to show a popover notification 
    
      
    

      
      
    

  
    
      <button
    size="m"
    tuiButton
    type="button"
    (click)="show.set(true)"
>
    Show
</button>
<ng-template
    [tuiNotificationOptions]="{label: 'Directive', autoClose: 0, closable: false}"
    [(tuiNotification)]="show"
>
    <span tuiSubtitle>This is a declarative directive alert</span>
    <button
        tuiButton
        type="button"
        (click)="show.set(false)"
    >
        Close
    </button>
</ng-template>

Service

Using service to show a popover notification 
    
      
    

      
      
    

  
    
      <button
    size="s"
    tuiButton
    type="button"
    (click)="notifications.open('Hello there', {label: 'Notification'}).subscribe()"
>
    Show string
</button>
&ngsp;
<button
    size="s"
    tuiButton
    type="button"
    (click)="onClick()"
>
    Show component
</button>
GitHub StackBlitz