Component

Block UI

An overlay that blocks a region — or the whole screen — while it works. It disables the wrapped content, shows a spinner, icon, or custom message, and clears when unblocked.

Blocked with spinner

Autumn walk

Oak leaves along the river — Freiburg.

Taken Nov 3, 2026 · Black Forest.

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';

import { HbBlockUiComponent, HbButtonComponent } from '@herbst/ui';

@Component({
  selector: 'hb-demo-block-ui-spinner',
  imports: [HbBlockUiComponent, HbButtonComponent],
  template: `
    <div class="w-full max-w-sm">
      <hb-block-ui [hbBlocked]="loading()" hbSpinner class="rounded-lg border border-border">
        <div class="flex flex-col gap-1 p-6">
          <h3 class="font-medium">Autumn walk</h3>
          <p class="text-sm text-muted-foreground">Oak leaves along the river — Freiburg.</p>
          <p class="text-sm text-muted-foreground">Taken Nov 3, 2026 · Black Forest.</p>
        </div>
      </hb-block-ui>

      <button hb-button hbSize="sm" class="mt-3" [hbDisabled]="loading()" (click)="reload()">
        Reload
      </button>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoBlockUiSpinnerComponent {
  protected readonly loading = signal(false);

  protected reload(): void {
    this.loading.set(true);
    setTimeout(() => this.loading.set(false), 1500);
  }
}

Icon & custom message

October in the Black Forest

This photo was archived and can no longer be edited.

Archived — read only

Full screen

API reference

hb-block-ui

Property	Description	Type	Default
[hbBlocked]	Show the overlay and make the wrapped content inert.	boolean	false
[hbFullScreen]	Cover the whole viewport instead of just the wrapped region.	boolean	false
[hbSpinner]	Show the built-in spinner in the overlay.	boolean	false
[hbIcon]	Icon shown in the overlay when no spinner is used.	string	''
[hbBlockUiContent]	Projected overlay content, such as a status message.	slot	—
[class]	Extra CSS classes merged onto the host. Default content is the region being blocked.	string	''