Componente

Toast

Notificações transitórias disparadas imperativamente por um serviço. Chame helpers tipados (success, warning, loading…), adicione descrição, ícone e botões de ação, escolha uma posição na tela, pause ao passar o mouse, mostre uma barra de progresso, conduza um fluxo assíncrono com promise(), e mantenha uma referência para atualizar ou dispensar depois.

Tipos

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);
}

Descrição, ações e posição

Promise e atualização manual

Referência de API

HbToastService

Propriedade	Descrição	Tipo	Padrão
default / success / info / warning / destructive / loading	Atalhos tipados — (title, opts?) => HbToastRef. loading nunca dispensa sozinho.	(title, opts?) => HbToastRef	—
show(config)	O ponto de entrada geral — passe um HbToastConfig completo.	(config) => HbToastRef	—
promise(promise, messages, opts?)	Mostra um toast de loading que vira success ou destructive quando a promise resolve; success/error aceitam string ou função do resultado.	(promise, { loading, success, error }, opts?) => HbToastRef	—
dismiss(id?) / clear()	Dispensa um toast pelo id, ou dispensa todos.	(id?) => void	—

HbToastConfig (per toast)

Propriedade	Descrição	Tipo	Padrão
type	Define o ícone, a cor e a tonalidade do progresso.	'default' \| 'success' \| 'warning' \| 'destructive' \| 'info' \| 'loading'	'default'
title / description	O título em negrito e uma segunda linha esmaecida opcional.	string	—
icon	Sobrescreve o ícone do tipo por um ícone nomeado (loading sempre mostra um spinner).	string	—
duration	Milissegundos antes de dispensar sozinho; 0 mantém aberto. loading é forçado a 0.	number	4000
position	Canto ou borda onde o toast se empilha.	'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right' \| 'center'	'bottom-right'
closable / pauseOnHover / progressBar	Mostra um botão de fechar, pausa o timer no hover, e renderiza uma barra de progresso que encolhe.	boolean	true / true / false
actions	Botões abaixo do texto: { label, onClick?(ref), type?, closeOnClick? }. Fecha ao clicar a menos que closeOnClick seja false.	HbToastAction[]	—
class / onDismiss	Classes extras no cartão do toast, e um callback disparado ao ser dispensado.	ClassValue / () => void	—

HbToastRef & global config

Propriedade	Descrição	Tipo	Padrão
ref.update(patch)	Atualiza um toast vivo (type, title, duration…) — o timer reinicia.	(Partial<HbToastConfig>) => void	—
ref.dismiss() / pause() / resume()	Fecha-o, ou segura e retoma seu timer de auto-dispensa. ref também expõe os signals config/paused/visible.	() => void	—
provideHbToast(config)	Padrões da aplicação: position, duration, closable, pauseOnHover, progressBar, maxVisible, gap, offset.	Provider	—