Componente

Alert

Um aviso emoldurado que chama a atenção para uma mensagem curta e permanente — um status, uma nota ou um resultado — com ícone inicial opcional e uma ação à direita.

Básico

Photo saved
Your photo of falling leaves was added to the Herbst album.
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbAlertComponent } from '@herbst/ui';

@Component({
  selector: 'hb-demo-alert-basic',
  imports: [HbAlertComponent],
  template: `
    <hb-alert
      class="max-w-lg"
      hbTitle="Photo saved"
      hbDescription="Your photo of falling leaves was added to the Herbst album."
    />
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoAlertBasicComponent {}

Tipos

Default
A quiet note about the turning season.
Success
Your autumn walk was saved to the journal.
Warning
Frost is expected tonight — cover the balcony plants.
Destructive
This photo was removed from the album.

Ícone personalizado e oculto

Overridden icon
Any registered icon name passed to hbIcon replaces the default for the type.
No icon
Set hbIcon to none to drop the leading mark and align the text flush left.

Com ação

Photo removed
Your photo of falling leaves was moved to the trash.

Só título ou só descrição

Title only — a short confirmation with no body text.
Description only, icon removed — a quiet inline note without a heading.

Referência de API

hb-alert

PropriedadeDescriçãoTipoPadrão
[hbType] Cor de status aplicada à borda esquerda, ao ícone e ao título. 'default' | 'success' | 'warning' | 'destructive' 'default'
[hbTitle] Linha de título em negrito exibida acima da descrição. string ''
[hbDescription] Texto de corpo em tom suave exibido abaixo do título. string ''
[hbIcon] Nome do ícone inicial. Vazio usa o ícone padrão do tipo; 'none' o oculta. string ''
[class] Classes CSS extras mescladas no host. string ''
[hbAlertAction] Conteúdo projetado alinhado à direita, como um botão de ação. slot