Alert
@xui/alertA small confirm/cancel modal for irreversible actions. A preset over @xui/dialog; dismissing it any way counts as a cancel. The overlay behaviour is not testable in jsdom, so these stories verify it.
Install
pnpm add @xui/alert Add the barrel to a standalone component's imports:
import { XuiAlertImports } from '@xui/alert';
@Component({
imports: [XuiAlertImports],
// …
})Examples
Default
Loading preview…
<button xuiButton color="error" (click)="open.set(true)">Delete project</button>
@if (result()) { <p class="text-foreground-muted mt-3 text-sm">You chose: {{ result() }}</p> }
<xui-alert
[(open)]="open"
color="error"
confirmText="Delete"
cancelText="Cancel"
(confirmed)="result.set('confirmed')"
(cancelled)="result.set('cancelled')"
>
Delete <b>warehouse-sync</b>? This permanently removes the project and cannot be undone.
</xui-alert>Acknowledge
Loading preview…
<button xuiButton (click)="open.set(true)">Show notice</button>
<xui-alert [(open)]="open" color="success" confirmText="Got it">
Your changes have been published.
</xui-alert>Imperative
Source only — this one needs a component of its own to run, so there is nothing to render here.
<button xuiButton color="error" (click)="ask()">Delete (imperative)</button>
@if (answer() !== null) {
<p class="text-foreground-muted mt-3 text-sm">Promise resolved: {{ answer() }}</p>
}API
The body rendered by XuiAlertService. Not exported — the service is the only thing that mounts it, and it closes the dialog with the boolean result the promise resolves to.
A small modal that asks the user to confirm or cancel before something irreversible.
Inputs
openbooleanWhether the alert is showing. Two-way bindable with [(open)].falsecolorXuiAlertColorIntent of the alert. Also picks the default icon and the confirm button's colour, and promotes the dialog to role="alert" for error and warning.'none'iconstring | null | undefinedOverride the icon the color implies. Pass null to show none.undefinedconfirmTextstringLabel of the confirm button.'Confirm'cancelTextstring | nullOmit for an acknowledge-only alert with no cancel button.nullcanEscapeKeyClosebooleanLet Escape dismiss the alert. On by default; turn it off for a decision the user must make explicitly.truecanOutsideClickClosebooleanLet a click on the backdrop dismiss the alert. Off by default, since an alert asks a question.falseOutputs
confirmedvoidEmits when the confirm button is pressed.cancelledvoidEmits when the alert is dismissed — by the cancel button, Escape, or an outside click.