Component

Alert dialog

A modal that interrupts the flow to confirm a consequential choice. It opens from a projected trigger, frames a title and message, and returns an OK or Cancel outcome.

Basic

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

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

@Component({
  selector: 'hb-demo-alert-dialog-basic',
  imports: [HbAlertDialogComponent, HbButtonComponent],
  template: `
    <hb-alert-dialog
      hbTitle="Save this photo?"
      hbDescription="Your photo of falling leaves will be added to the Herbst album."
      hbOkText="Save"
    >
      <button hb-button hbType="outline" hbAlertDialogTrigger>Add photo</button>
    </hb-alert-dialog>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoAlertDialogBasicComponent {}

Destructive confirm

Content & forced choice

Position, width & footer

Gated action & events

No action yet.

API reference

hb-alert-dialog — inputs

Property	Description	Type	Default
[hbTitle]	Heading shown at the top of the dialog.	string	''
[hbDescription]	Supporting text below the title.	string	''
[hbIcon]	Optional leading icon name in the header.	string	''
[hbOkText]	Label of the confirm button.	string	'OK'
[hbCancelText]	Label of the cancel button; empty hides it.	string	'Cancel'
[hbOkType]	Visual style of the confirm button.	'default' \| 'destructive' \| 'warning' \| 'success'	'default'
[hbOkDisabled]	Disable the confirm button.	boolean	false
[hbClosable]	Show the close icon and allow backdrop close.	boolean	true
[hbWidth]	CSS width of the panel.	string	'32rem'
[hbPosition]	Anchor of the panel within the viewport.	'center' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'	'center'
[hbFooterAlign]	Horizontal alignment of the footer buttons.	'start' \| 'center' \| 'end' \| 'between'	'end'
[hbData]	Arbitrary payload echoed back in the ok/cancel events.	object \| undefined	undefined

hb-alert-dialog — outputs & slots

Property	Description	Type	Default
(hbOk)	Emitted with hbData when the confirm button is pressed.	object \| undefined	—
(hbCancel)	Emitted with hbData when the cancel button is pressed.	object \| undefined	—
(hbOpenChange)	Emitted true on open and false on close.	boolean	—
[hbAlertDialogTrigger]	Projected element that opens the dialog when clicked.	slot	—
[hbAlertDialogContent]	Projected body content between the header and footer.	slot	—