chrome:shell.skip
chrome:nav.docs chrome:nav.cdk chrome:nav.components blocks:nav.blocks chrome:nav.tools chrome:nav.contribute chrome:nav.about
generated:catalog.area.components
generated:catalog.entry.toast.title generated:catalog.entry.confetti.title chrome:badge.new generated:catalog.entry.alert.title

generated:catalog.entry.alert.title

generated:catalog.entry.alert.description

@xngui/components/alert
@xngui/components/alert

chrome:demo.section

chrome:demo.preview

Heads up

A new version is available for download.
demo-preview:hints.category.assistive:
SRTip
demo-preview:projection.slots-label:
[xStart] ng-content
import { Component } from '@angular/core';
import { XAlert } from '@xngui/components/alert';
import { XIcon } from '@xngui/icons';
 
@Component({
selector: 'app-example',
imports: [XAlert, XIcon],
templateUrl: './alert.component.html',
})
export class ExampleComponent {}

chrome:demo.events.title

chrome:demo.events.empty

chrome:demo.api.title

x-alert

chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
status
XStatus
'info'
Semantic tone — drives color and host `role`.
size
XSize
—
Visual size tier — falls back to XConfigService when unset.
density
XDensity
—
Spacing offsets — orthogonal to `size`; falls back to XConfigService when unset.
title
string
—
Optional heading above the default body slot.
dismissible
boolean
false
Shows a dismiss button on the trailing edge.
dismissLabel
string
—
`aria-label` for the dismiss button — falls back to the `alert.dismiss` i18n key.