FEEDBACKBETA

ConfirmDialog

A service-driven native confirmation surface with deterministic channels, signal results, guarded async actions and complete modal accessibility.

Native top layerSignal referencesAsync guards

GET STARTED

Import

The standalone host and injectable service share one granular entry point.

import {
  NeuralConfirmDialog,
  NeuralConfirmationService,
} from '@neural-ng/core/confirm-dialog';

@Component({ imports: [NeuralConfirmDialog] })
export class WorkspacePage {
  private readonly confirmation = inject(NeuralConfirmationService);
}

Service-driven confirmation

Render the host once. Any descendant service consumer can open it without owning a duplicate visible model.

No confirmation completed yet.

Async action guard

While an action is pending, buttons are disabled and the accept action exposes aria-busy. Returning false deliberately keeps the dialog open.

Ready

Independent keyed hosts

Keys create deterministic channels for different layout regions or policies. Requests only reach a host with the same normalized key.

Latest same-key request wins

A new request replaces only the active request sharing its key. The previous ref completes as dismissed · replaced; no hidden queue accumulates.

No request replaced yet.

Per-request options

Labels, icons, action visibility and dismissal policies can be overridden per request without changing the host.

Action errors

A thrown async action emits actionError, returns the dialog to an interactive state and leaves closing policy to the application.

No action error.

Unstyled and typed slots

Native dialog behavior, modal focus, ARIA links and service state remain while every ConfirmDialog and inherited Dialog visual class is removed.

Contract boundaries

Service

Owns active keyed requests and refs.

Host

Owns modal rendering, focus and actions.

Application

Owns business effects and error messaging.

ACCESSIBILITY

A real modal dialog

ConfirmDialog composes Neural Dialog rather than simulating modal behavior with generic div elements.

Name and description

The generated heading and message IDs wire aria-labelledby and aria-describedby automatically.

Focus policy and restoration

defaultFocus selects accept, reject or no action. On close, focus returns to the element that opened the native dialog.

Keyboard

Tab remains within the modal. Shift+Tab reverses focus order. Escape follows the effective request or host policy.

Busy actions

Processing disables both choices, prevents duplicate invocation and exposes busy state on the accepting action.

Explicit dismissal policy

Close button, Escape and backdrop dismissal are independent. Destructive confirmations default to no close button and a non-dismissible backdrop.

PUBLIC API

ConfirmDialog contract

NeuralConfirmDialog is the canonical host and NeuralConfirmationService is the canonical service token.

Component inputs

Input	Type	Default	Purpose
key	string	'default'	Connects this host to a service channel.
closable	boolean	false	Shows the inherited close button.
closeOnEscape	boolean	true	Allows Escape dismissal.
dismissibleBackdrop	boolean	false	Allows backdrop dismissal.
defaultFocus	'accept' \| 'reject' \| 'none'	'accept'	Focus target after opening.
unstyled	boolean	false	Removes ConfirmDialog and Dialog visuals.
confirmDialogClass	string	''	Additive class on the native dialog.
classes	NeuralConfirmDialogClasses	{}	Typed additive class slots.

Component outputs

acceptedNeuralConfirmation

Accept action completed.

rejectedNeuralConfirmation

Reject action completed.

dismissedNeuralConfirmationClose

Closed without accepting or rejecting.

closedNeuralConfirmationClose

Every completed dialog close.

actionErrorNeuralConfirmDialogActionError

Async accept or reject action threw.

NeuralConfirmationInput

Option	Type	Default	Purpose
key	string	default	Target host channel.
header	string	localized	Dialog heading.
message	string	required	Non-empty confirmation message.
icon	boolean	true	Shows the leading icon.
iconClass	string	nt-alert-triangle	Leading Neural Icon class.
acceptLabel / rejectLabel	string	localized	Action labels.
acceptIconClass / rejectIconClass	string	nt-check / nt-x	Action Neural Icons.
acceptVisible / rejectVisible	boolean	true	Action visibility.
closable	boolean	host value	Per-request close button override.
closeOnEscape	boolean	host value	Per-request Escape override.
dismissibleBackdrop	boolean	host value	Per-request backdrop override.
accept / reject	NeuralConfirmationAction	undefined	Sync or async guarded action.
onClose	(event) => void	undefined	Request-local completion callback.
data	unknown	undefined	Consumer metadata retained on the request.

Service API

confirm(input) => NeuralConfirmationRef

Creates or replaces a keyed request.

confirmation(key?) => NeuralConfirmation | null

Reads the active request for a key.

close(key?) => boolean

Dismisses the active keyed request through the API.

confirmationsSignal<readonly NeuralConfirmation[]>

Readonly active request collection.

runAction and complete are host integration methods; ordinary consumers should use the returned ref and close().

Signal-backed reference

idstring

Stable request identifier.

closedSignal<boolean>

Whether the request has completed.

resultSignal<accepted | rejected | dismissed | null>

Final result.

closeReasonSignal<NeuralConfirmationCloseReason | null>

Exact close reason.

dismiss() => void

Dismisses this request through the API.

Results and close reasons

Results

acceptedrejecteddismissed

Close reasons

acceptrejectescapebackdropclose-buttonapireplaced

Typed class slots

rootheadericontitlebodymessagefooteracceptButtonrejectButtonbuttonIcon

Public types

NeuralConfirmationInput

Configuration accepted by confirm().

NeuralConfirmation

Normalized immutable active request.

NeuralConfirmationRef

Signal-backed request reference.

NeuralConfirmationClose

{ confirmation, result, reason }

NeuralConfirmationAction

() => boolean | void | Promise<boolean | void>

NeuralConfirmDialogActionError

{ confirmation, action, error }

DESIGN TOKENS

ConfirmDialog tokens

Component-specific sizing composes with the complete Dialog surface token contract.

Component tokens

--neural-confirm-dialog-width

Component inline size.

--neural-confirm-dialog-header-padding

Header internal spacing.

--neural-confirm-dialog-body-padding

Body internal spacing.

--neural-confirm-dialog-footer-padding

Footer internal spacing.

--neural-confirm-dialog-icon-size

Icon width and height.

--neural-confirm-dialog-title-size

Title width and height.

--neural-confirm-dialog-icon-color

Icon foreground color.

--neural-confirm-dialog-icon-background

Icon background surface.

--neural-confirm-dialog-enter-duration

Component enter animation duration.

--neural-confirm-dialog-leave-duration

Component leave animation duration.

--neural-confirm-dialog-enter-distance

Component enter animation travel distance.

--neural-confirm-dialog-enter-scale

Component enter animation starting scale.

--neural-confirm-dialog-enter-easing

Component enter animation easing curve.

--neural-confirm-dialog-leave-easing

Component leave animation easing curve.

Inherited Dialog tokens

--neural-dialog-color

Component foreground color.

--neural-dialog-background

Component background surface.

--neural-dialog-border

Component border shorthand.

--neural-dialog-radius

Component corner radius.

--neural-dialog-shadow

Component box shadow.

--neural-dialog-backdrop

Component backdrop color.

--neural-dialog-backdrop-filter

Component backdrop filter effect.

Primary

Surface