Taiga UI 5 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