Taiga UI 5.0 is out!

Dialog CORE

Examples API GitHub

On this page

See also

SheetDialog, BottomSheet
Customizable modal dialogs

String

Basic string dialog with a customizable button. 


    
      
    

      
      
    

  
    
      <button
    tuiButton
    type="button"
    (click)="default()"
>
    Default button
</button>
<br />
<br />
<button
    tuiButton
    type="button"
    (click)="custom()"
>
    Custom button
</button>

Directive

Using declarative directive to layout and show a dialog. 
    
      
    

      
      
    

  
    
      <button
    tuiButton
    type="button"
    (click)="open = true"
>
    Show dialog
</button>
<ng-template
    let-observer
    [tuiDialogOptions]="{label: 'Let us know'}"
    [(tuiDialog)]="open"
>
    <form
        tuiForm
        (submit.prevent)="observer.complete()"
    >
        <tui-textfield>
            <label tuiLabel>Your name</label>
            <input
                tuiAutoFocus
                tuiInput
            />
        </tui-textfield>
        <footer>
            <button
                appearance="secondary"
                tuiButton
                type="button"
                (click)="observer.complete()"
            >
                Cancel
            </button>
            <button
                tuiButton
                type="submit"
            >
                Submit
            </button>
        </footer>
    </form>
</ng-template>

Component

Reusing a component to show a dialog. 
    
      
    

      
      
    

  
    
      <button
    tuiButton
    type="button"
    (click)="click()"
>
    Show dialog
</button>

Confirmation

Using bundled component for action confirmation. 
    
      
    

      
      
    

  
    
      <button
    tuiButton
    type="button"
    (click)="onClick(content)"
>
    Show dialog
</button>

<ng-template
    #content
    let-context
>
    <form tuiForm>
        <tui-textfield>
            <label tuiLabel>Your name</label>
            <input
                name="name"
                placeholder="John Wick"
                tuiAutoFocus
                tuiInput
                [ngModel]="value"
                (ngModelChange)="onModelChange($event)"
            />
        </tui-textfield>
        <footer>
            <button
                tuiButton
                type="submit"
                (click.prevent)="context.complete()"
            >
                Submit
            </button>
        </footer>
    </form>
</ng-template>

Closing

Providing a custom stream to close dialogs. 
    
      
    

      
      
    

  
    
      <button
    tuiButton
    type="button"
    (click)="open = true"
>
    Show dialog
</button>
<ng-template
    let-id="id"
    [tuiDialogOptions]="{size: 's'}"
    [(tuiDialog)]="open"
>
    <header tuiHeader>
        <hgroup tuiTitle>
            <h2 [id]="id">Hello!</h2>
            <p>Don't forget to set ID for accessible label</p>
        </hgroup>
    </header>
    <footer>
        <button
            tuiButton
            type="button"
            (click)="auth.logout()"
        >
            Logout
        </button>
    </footer>
</ng-template>

Fullscreen

Using built-in fullscreen appearance 


    
      
    

      
      
    

  
    
      <button
    tuiButton
    type="button"
    (click)="fullscreen = true"
>
    Show fullscreen
</button>
<br />
<br />
<button
    tuiButton
    type="button"
    (click)="scrollable = true"
>
    Show scrollable
</button>
<ng-template
    let-id="id"
    [tuiDialogOptions]="{appearance: 'fullscreen'}"
    [(tuiDialog)]="fullscreen"
>
    <header tuiHeader>
        <hgroup tuiTitle>
            <h2 [id]="id">Fullscreen heading</h2>
            <p>
                This is shown fullscreen regardless of content height, you can use
                <code>margin-top: auto</code>
                to make sure footer is at the bottom of the page.
            </p>
        </hgroup>
    </header>
    <footer
        tuiFloatingContainer
        [style.margin-block-start]="'auto'"
    >
        <button
            tuiButton
            type="button"
            (click)="fullscreen = false"
        >
            Got it
        </button>
        <button
            appearance="flat"
            tuiButton
            type="button"
            (click)="fullscreen = false"
        >
            Never mind
        </button>
    </footer>
</ng-template>

<ng-template
    [tuiDialogOptions]="{appearance: 'fullscreen'}"
    [(tuiDialog)]="scrollable"
>
    <tui-app-bar tuiAppBarSize>
        <button
            iconStart="@tui.chevron-left"
            tuiIconButton
            tuiSlot="start"
            type="button"
            (click)="scrollable = false"
        >
            Back
        </button>
        <progress
            size="s"
            tuiProgressBar
            [max]="100"
            [style.width.rem]="10"
            [value]="35"
        ></progress>
        <button
            tuiButton
            tuiSlot="end"
            type="button"
            (click)="scrollable = false"
        >
            Action
        </button>
    </tui-app-bar>
    <section [style.margin]="'0 -1rem'">
        @for (_ of '-'.repeat(50); track $index) {
            <div tuiCell>
                <div
                    appearance="primary"
                    tuiAvatar="@tui.star"
                ></div>
                <div tuiTitle>
                    Title
                    <div tuiSubtitle>Description</div>
                </div>
                <div tuiTitle>
                    Secondary title
                    <div tuiSubtitle>Another description</div>
                </div>
            </div>
        }
    </section>
    <footer tuiFloatingContainer>
        <button
            tuiButton
            type="button"
            (click)="scrollable = false"
        >
            Got it
        </button>
        <button
            appearance="flat"
            tuiButton
            type="button"
            (click)="scrollable = false"
        >
            Never mind
        </button>
    </footer>
</ng-template>

Customization

Customizing look and animations of dialogs by augmenting built-in appearance or completely overriding it. 


    
      
    

      
      
    

  
    
      <button
    tuiButton
    type="button"
    (click)="augmented = true"
>
    Show augmented
</button>
<br />
<br />
<button
    tuiButton
    type="button"
    (click)="custom = true"
>
    Show custom
</button>
<ng-template
    let-id="id"
    [tuiDialogOptions]="{size: 's', appearance: 'taiga compact'}"
    [(tuiDialog)]="augmented"
>
    <header tuiHeader>
        <hgroup tuiTitle>
            <h2 [id]="id">Augmented design</h2>
            <p>Using both built-in "taiga" appearance and custom "compact" appearance to alter built-in styles</p>
        </hgroup>
    </header>
</ng-template>

<ng-template
    let-id="id"
    [tuiDialogOptions]="{appearance: 'sheet'}"
    [(tuiDialog)]="custom"
>
    <header [id]="id">Custom design</header>
    <p>
        Overriding default appearance completely and taking the styles of dialog fully upon oneself, leaving only
        behavior like focus trap and closable/dismissible interactions to Taiga UI
    </p>
</ng-template>

    

      
      
    

  
    
      [data-appearance~='compact'] {
    padding: 1rem !important;
    border-radius: var(--tui-radius-s) !important;
}

[data-appearance='sheet'] {
    inline-size: 100vw;
    align-self: flex-end;
    padding: 1.25rem 1rem ~'max(1.25rem, env(safe-area-inset-bottom))';

    --tui-from: translate3d(0, 100vh, 0);

    &.tui-enter,
    &.tui-leave {
        animation-name: tuiSlide;
    }

    > header,
    > ng-component > header {
        font: var(--tui-typography-heading-h6);
    }

    > p,
    > ng-component > p {
        margin: 1rem 0 0;
    }

    > button {
        background: none !important;
    }
}
GitHub StackBlitz