Component
Alert
A bordered callout that draws the eye to a short, standing message β a status, a note, or an outcome β with an optional leading icon and a trailing action.
Basic
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 {}
Types
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.
Custom & hidden icon
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.
With action
Photo removed
Your photo of falling leaves was moved to the trash.
Title or description only
Title only β a short confirmation with no body text.
Description only, icon removed β a quiet inline note without a heading.
API reference
hb-alert
| Property | Description | Type | Default |
|---|---|---|---|
| [hbType] | Status colour applied to the left border, icon, and title. | 'default' | 'success' | 'warning' | 'destructive' | 'default' |
| [hbTitle] | Bold heading line shown above the description. | string | '' |
| [hbDescription] | Muted body text shown below the title. | string | '' |
| [hbIcon] | Leading icon name. Empty uses the type's default icon; 'none' hides it. | string | '' |
| [class] | Extra CSS classes merged onto the host. | string | '' |
| [hbAlertAction] | Projected content aligned to the trailing edge, such as an action button. | slot | β |