Taiga UI 5.0 is out!

Toast KIT

Examples API GitHub

On this page

Basic

Using inline with various content. Use ShrinkWrap for balanced tight wrapping.

Desktop

With action
With icon
With badge
Avatar
Everything
The text of the notification telling what happened is in three lines because there is a lot of information

Mobile

With action
With icon
With badge
Avatar
Everything
The text of the notification telling what happened is in three lines because there is a lot of information 
    
      
    

      
      
    

  
    
      @for (platform of platforms; track $index) {
    <h2>{{ platform === 'web' ? 'Desktop' : 'Mobile' }}</h2>
    <section [tuiPlatform]="platform">
        <button
            tuiToast
            type="button"
        >
            Plain text interactive
        </button>
        <div tuiToast>
            With action
            <button
                tuiButton
                type="button"
            >
                Action
            </button>
        </div>
    </section>
    <section [tuiPlatform]="platform">
        <div
            iconStart="@tui.info"
            tuiToast
        >
            With icon
        </div>
        <div tuiToast>
            <tui-icon
                appearance="accent"
                icon="@tui.box"
                tuiBadge
            />
            With badge
            <button
                appearance="icon"
                iconStart="@tui.x"
                size="xs"
                tuiIconButton
                type="button"
            >
                Close
            </button>
        </div>
    </section>
    <section [tuiPlatform]="platform">
        <div tuiToast>
            <div tuiAvatar="@tui.user">
                <img
                    alt=""
                    src="https://github.com/waterplea.png"
                />
            </div>
            Avatar
        </div>
        <div tuiToast>
            <div tuiAvatar="@tui.user">
                <img
                    alt=""
                    src="https://github.com/marsibarsi.png"
                />
            </div>
            Everything
            <button
                tuiButton
                type="button"
            >
                Action
            </button>
            @if (platform === 'web') {
                <button
                    appearance="icon"
                    iconStart="@tui.x"
                    size="xs"
                    tuiIconButton
                    type="button"
                >
                    Close
                </button>
            }
        </div>
    </section>
    <section [tuiPlatform]="platform">
        <div
            iconStart="@tui.alarm-clock"
            tuiShrinkWrap="min(25rem, 100%)"
            tuiToast
        >
            <tui-shrink-wrap>
                The text of the notification telling what happened is in three lines because there is a lot of
                information
            </tui-shrink-wrap>
            <button
                tuiButton
                type="button"
            >
                Action
            </button>
        </div>
    </section>
}

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--tui-background-base-alt);
    box-shadow: 0 0 0 100rem var(--tui-background-base-alt);
}

section {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

[tuiToast]::before {
    color: var(--tui-background-accent-1);
}

Customization

Custom styles and more component

Desktop

Sending to printer
Updating...

Mobile

 Updating...
Added 
    
      
    

      
      
    

  
    
      <h2>Desktop</h2>
<section tuiPlatform="web">
    <div tuiToast>
        <tui-progress-circle
            size="xxs"
            [max]="100"
            [value]="value()"
        />
        Sending to printer
        <button
            size="s"
            tuiButton
            type="button"
            (click)="trigger$.next(0)"
        >
            Restart
        </button>
    </div>
    <div
        tuiTheme="dark"
        tuiToast
        [style.background]="'#575B61'"
    >
        <tui-loader [inheritColor]="true" />
        Updating...
    </div>
</section>

<h2>Mobile</h2>
<section tuiPlatform="ios">
    <div tuiToast>
        <tui-loader />
        Updating...
    </div>
    <div
        iconStart="@tui.circle-check"
        tuiTheme="dark"
        tuiToast
        [style.background]="'var(--tui-text-action)'"
    >
        Added
        <button
            appearance="secondary-grayscale"
            size="s"
            tuiButton
            type="button"
        >
            Label
        </button>
    </div>
</section>

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--tui-background-base-alt);
    box-shadow: 0 0 0 100rem var(--tui-background-base-alt);
}

section {
    display: flex;
    gap: 1rem;
}

Service

Showing toast as notification on top of the screen. By default 2 toasts can be shown simultaneously on desktop and 1 on mobile, the rest are queued. This number is controlled by TUI_TOAST_CONCURRENCY token 
    
      
    

      
      
    

  
    
      <button
    tuiButton
    type="button"
    (click)="primitive()"
>
    String
</button>
<button
    tuiButton
    type="button"
    (click)="template.set(true)"
>
    Template
</button>
<button
    tuiButton
    type="button"
    (click)="component()"
>
    Component
</button>
<ng-template
    [tuiToast]="template()"
    [tuiToastOptions]="{closable: false}"
    (tuiToastChange)="template.set($event)"
>
    <a
        href="https://github.com/taiga-family/taiga-ui"
        iconEnd="@tui.external-link"
        iconStart="@tui.github"
        rel="noreferrer noopener"
        target="_blank"
        tuiToast
    >
        Check out source code
    </a>
</ng-template>

    

      
      
    

  
    
      :host {
    display: flex;
    gap: 1rem;
}
GitHub StackBlitz