Skip to content Herbst UI beta

Component

Toast

Transient notifications fired imperatively from a service. Call typed helpers (success, warning, loading…), add a description, icon, and action buttons, choose a screen position, pause on hover, show a progress bar, drive an async flow with promise(), and keep a handle to update or dismiss it later.

Types 

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

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

@Component({
  selector: 'hb-demo-toast-types',
  imports: [HbButtonComponent],
  template: `
    <div class="flex flex-wrap gap-2">
      <button hb-button hbType="secondary" (click)="toast.default('Photo saved')">Default</button>
      <button hb-button hbType="secondary" (click)="toast.success('Uploaded to Freiburg album')">
        Success
      </button>
      <button hb-button hbType="secondary" (click)="toast.info('Sync scheduled for tonight')">
        Info
      </button>
      <button hb-button hbType="secondary" (click)="toast.warning('Low light — blurry shot')">
        Warning
      </button>
      <button hb-button hbType="secondary" (click)="toast.destructive('Failed to save')">
        Destructive
      </button>
      <button hb-button hbType="secondary" (click)="toast.loading('Uploading photos…')">
        Loading
      </button>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoToastTypesComponent {
  protected readonly toast = inject(HbToastService);
}

Description, actions & position

Promise & manual update

API reference

HbToastService

PropertyDescriptionTypeDefault
default / success / info / warning / destructive / loading Typed shortcuts — (title, opts?) => HbToastRef. loading never auto-dismisses. (title, opts?) => HbToastRef —
show(config) The general entry point — pass a full HbToastConfig. (config) => HbToastRef —
promise(promise, messages, opts?) Show a loading toast that becomes success or destructive when the promise settles; success/error accept a string or a function of the result. (promise, { loading, success, error }, opts?) => HbToastRef —
dismiss(id?) / clear() Dismiss one toast by id, or dismiss all of them. (id?) => void —

HbToastConfig (per toast)

PropertyDescriptionTypeDefault
type Sets the icon, colour, and progress tint. 'default' | 'success' | 'warning' | 'destructive' | 'info' | 'loading' 'default'
title / description The bold headline and an optional muted second line. string —
icon Override the type icon with a named icon (loading always shows a spinner). string —
duration Milliseconds before auto-dismiss; 0 keeps it open. loading is forced to 0. number 4000
position Corner or edge the toast stacks in. 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center' 'bottom-right'
closable / pauseOnHover / progressBar Show a close button, pause the timer on hover, and render a shrinking progress bar. boolean true / true / false
actions Buttons under the text: { label, onClick?(ref), type?, closeOnClick? }. Closes on click unless closeOnClick is false. HbToastAction[] —
class / onDismiss Extra classes on the toast card, and a callback fired when it is dismissed. ClassValue / () => void —

HbToastRef & global config

PropertyDescriptionTypeDefault
ref.update(patch) Patch a live toast (type, title, duration…) — the timer restarts. (Partial<HbToastConfig>) => void —
ref.dismiss() / pause() / resume() Close it, or hold and continue its auto-dismiss timer. ref also exposes config/paused/visible signals. () => void —
provideHbToast(config) App-level defaults: position, duration, closable, pauseOnHover, progressBar, maxVisible, gap, offset. Provider —