Taiga UI 5.0 is out!

BlockStatus LAYOUT

Examples API GitHub

On this page

Component for status screens, result screens and zero screens

Basic

not found

Not found

Try to find by number 
    
      
    

      
      
    

  
    
      <tui-block-status>
    <img
        alt="not found"
        src="./assets/images/not-found.svg"
        tuiSlot="top"
        class="image"
    />

    <h4>Not found</h4>

    Try to find by number
</tui-block-status>

With actions

survived

Something has been achieved

You can do something with it, or you can not do it. And the description text can be quite long. 
    
      
    

      
      
    

  
    
      @if (size(); as size) {
    <tui-block-status>
        <img
            alt="survived"
            src="./assets/images/going-up.svg"
            tuiSlot="top"
        />
        <h4>Something has been achieved</h4>
        <span class="text">
            You can do something with it, or you can not do it. And the description text can be quite long.
        </span>
        <button
            appearance="secondary"
            tuiButton
            type="button"
            [size]="size"
        >
            Do
        </button>
        <button
            appearance="flat-grayscale"
            tuiButton
            type="button"
            [size]="size"
        >
            Not to do
        </button>
    </tui-block-status>
}

Cards

hidden content
We hide the unwanted block
something wrong
Something happened in this block 
    
      
    

      
      
    

  
    
      @if (size(); as size) {
    <div class="container">
        <tui-block-status
            class="card"
            [card]="true"
        >
            <img
                alt="hidden content"
                src="./assets/images/camping.svg"
                tuiSlot="top"
                class="image"
            />
            We hide the unwanted block
            <button
                appearance="secondary"
                tuiButton
                type="button"
                [size]="size"
            >
                Return
            </button>
        </tui-block-status>
        <tui-block-status
            class="card"
            [card]="true"
        >
            <img
                alt="something wrong"
                src="./assets/images/cancel.svg"
                tuiSlot="top"
                class="image"
            />
            Something happened in this block
            <button
                appearance="secondary"
                tuiButton
                type="button"
                [size]="size"
            >
                Try again
            </button>
        </tui-block-status>
    </div>
}

    

      
      
    

  
    
      .container {
    display: flex;
    gap: 1rem;

    :host-context(tui-root._mobile) & {
        flex-direction: column;
    }
}

.image {
    inline-size: 5.5rem;
    block-size: 5.5rem;
}

.card {
    background-color: var(--tui-background-base-alt);
    block-size: auto;
}

Customization

You can put other content instead of image using tui-block-content css class
Alex Inkin

Alex Inkin

    
      
    

      
      
    

  
    
      <div class="container">
    <tui-block-status
        class="card"
        [card]="true"
    >
        <tui-avatar-stack tuiSlot="top">
            @for (user of users; track user) {
                <div
                    size="l"
                    [style.background]="user | tuiAutoColor"
                    [tuiAvatar]="user | tuiInitials"
                ></div>
            }
        </tui-avatar-stack>

        You can put other content instead of image using
        <code>tui-block-content</code>
        css class

        <button
            appearance="primary"
            size="s"
            tuiButton
            type="button"
            [style.border-radius.rem]="100"
        >
            Got it
        </button>
    </tui-block-status>

    <tui-block-status
        [card]="true"
        [class.card]="true"
    >
        <img
            alt="Alex Inkin"
            src="assets/images/avatar.jpg"
            tuiSlot="top"
            class="avatar"
        />

        <h1>Alex Inkin</h1>
    </tui-block-status>
</div>

    

      
      
    

  
    
      .container {
    display: flex;
    gap: 1rem;

    :host-context(tui-root._mobile) & {
        flex-direction: column;
    }
}

.card {
    background-color: var(--tui-background-base-alt);
    block-size: auto;
}

.avatar[tuiSlot='top'] {
    inline-size: 6.25rem;
    block-size: 6.25rem;
    border-radius: 50%;
}

Mobile

hidden content
We hide the unwanted block
something wrong
Something happened in this block
Something happened in this block 
    
      
    

      
      
    

  
    
      <div
    tuiPlatform="ios"
    class="container"
>
    <tui-block-status
        class="card"
        [card]="true"
    >
        <img
            alt="hidden content"
            src="./assets/images/camping.svg"
            tuiSlot="top"
            class="image"
        />

        We hide the unwanted block

        <button
            appearance="secondary"
            size="m"
            tuiButton
            type="button"
        >
            Return
        </button>
    </tui-block-status>
    <tui-block-status
        tuiPlatform="ios"
        class="card"
        [card]="true"
    >
        <img
            alt="something wrong"
            src="./assets/images/cancel.svg"
            tuiSlot="top"
            class="image"
        />

        Something happened in this block

        <button
            appearance="secondary"
            size="m"
            tuiButton
            type="button"
        >
            Try again
        </button>
    </tui-block-status>

    <tui-block-status
        tuiPlatform="ios"
        class="card"
        [card]="true"
    >
        Something happened in this block
    </tui-block-status>
</div>

    

      
      
    

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

.card {
    background-color: var(--tui-background-base-alt);
    block-size: auto;
}

Desktop medium

survived

There is nothing here yet

To get started, create a server
    
      
    

      
      
    

  
    
      <tui-block-status size="m">
    <img
        alt="survived"
        src="./assets/images/going-up.svg"
        tuiSlot="top"
    />

    <h4>There is nothing here yet</h4>

    <span>To get started, create a server</span>

    <button
        appearance="primary"
        size="s"
        tuiButton
        type="button"
    >
        Create
    </button>
</tui-block-status>

Empty image block

Something happened in this block

Try again later
    
      
    

      
      
    

  
    
      <tui-block-status size="m">
    <h4>Something happened in this block</h4>

    <span>Try again later</span>

    <button
        appearance="secondary"
        size="s"
        tuiButton
        type="button"
    >
        Retry
    </button>
</tui-block-status>

Empty description block

hidden content

No operations

hidden content

No operations

    
      
    

      
      
    

  
    
      <div class="container">
    <tui-block-status
        class="card"
        [card]="true"
    >
        <img
            alt="hidden content"
            src="./assets/images/camping.svg"
            tuiSlot="top"
            class="image"
        />

        <h3>No operations</h3>
    </tui-block-status>
    <tui-block-status
        class="card"
        [card]="true"
    >
        <img
            alt="hidden content"
            src="./assets/images/camping.svg"
            tuiSlot="top"
            class="image"
        />

        <h3>No operations</h3>
        <button
            appearance="secondary"
            size="m"
            tuiButton
            type="button"
        >
            Return
        </button>
    </tui-block-status>
</div>

    

      
      
    

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

.card {
    background-color: var(--tui-background-base-alt);
    block-size: auto;
}
GitHub StackBlitz