Skip to content Herbst UI beta

Component

Empty

A placeholder for empty states — no results, an unfilled list, a first run. Compose it from a media icon, title, description, and an actions area, at several sizes and styles.

Anatomy

No photos found Try a different search, or add a new autumn photo. 
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { NgIcon, provideIcons } from '@ng-icons/core';
import { phosphorMagnifyingGlass } from '@ng-icons/phosphor-icons/regular';

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

@Component({
  selector: 'hb-demo-empty-basic',
  imports: [HbEmptyImports, HbButtonComponent, NgIcon],
  providers: [provideIcons({ phosphorMagnifyingGlass })],
  template: `
    <hb-empty class="w-full max-w-md rounded-lg border border-border">
      <hb-empty-header>
        <hb-empty-media hbVariant="icon">
          <ng-icon name="phosphorMagnifyingGlass" />
        </hb-empty-media>
        <hb-empty-title>No photos found</hb-empty-title>
        <hb-empty-description>
          Try a different search, or add a new autumn photo.
        </hb-empty-description>
      </hb-empty-header>

      <hb-empty-content>
        <button hb-button hbSize="sm">Add photo</button>
      </hb-empty-content>
    </hb-empty>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoEmptyBasicComponent {}

Variant & background

OutlineA dashed border frames the empty region.Muted backgroundA soft fill sets the region apart.

Sizes

Extra smallTight padding for inline empty states.LargeGenerous padding for full-page empty states.

API reference

hb-empty

PropertyDescriptionTypeDefault
[hbSize] Padding and gap scale. 'xs' | 'sm' | 'md' | 'lg' | 'xl' 'md'
[hbVariant] Plain, or framed with a dashed border. 'default' | 'outline' 'default'
[hbBackground] Optional soft background fill. 'none' | 'muted' 'none'

Parts

PropertyDescriptionTypeDefault
hb-empty-header Centered column holding the media, title, and description. slot —
hb-empty-media [hbVariant] The icon or illustration; icon variant wraps it in a muted tile. 'default' | 'icon' 'default'
hb-empty-title / hb-empty-description Heading and supporting text. slot —
hb-empty-content Actions area below the header (buttons, links). slot —