Skip to main content
Neural UIv2.0.0Documentation
View v1 GitHub

ConfirmDialog

Ask for a decision with an accessible confirmation dialog.

Category
Overlays
Import
@neural-ui/core/confirm-dialog
Selector
neu-confirm-dialog
import { NeuConfirmDialogComponent } from '@neural-ui/core/confirm-dialog';

Usage

Inject NeuConfirmDialogService and call confirm(data). The service creates the dialog; do not place NeuConfirmDialogComponent directly in a template because it requires dialog data and a DialogRef. The returned Promise resolves true on acceptance and false on rejection, Escape or backdrop dismissal. Perform the destructive operation only after true. The asynchronous result is part of this service contract.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Examples

Events: 0

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

Try and configure

Events: 0

confirmation.ts
this.confirmation.confirm({
  "title": "Delete record",
  "message": "Delete this record?",
  "acceptLabel": "Delete",
  "rejectLabel": "Cancel",
  "acceptVariant": "danger"
}).then(accepted => this.record('confirmed', accepted));

State and events

Inject NeuConfirmDialogService and call confirm(data). The service creates the dialog; do not place NeuConfirmDialogComponent directly in a template because it requires dialog data and a DialogRef. The returned Promise resolves true on acceptance and false on rejection, Escape or backdrop dismissal. Perform the destructive operation only after true. The asynchronous result is part of this service contract.

Accessibility and keyboard

Tab cycles through the dialog actions; Escape rejects and restores focus to the trigger.

Key
Action
Tab Move through the dialog actions while focus remains inside it.
Enter Activate the focused accept or reject button.
Space Activate the focused accept or reject button.
Escape Reject the confirmation and restore trigger focus.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

Public configuration

Name
Contract
NeuConfirmDialogServiceexport declare class NeuConfirmDialogService { confirm(data: NeuConfirmDialogData): Promise<boolean>; }

Public Types

Open a type to inspect its definition and interface fields.

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token
Purpose here
Other impact
Default / fallback
--neu-error Invalid field or danger-action color Shared by other Core consumers; scope the override. #dc2626
--neu-focus-ring Normal keyboard-focus ring Shared by other Core consumers; scope the override. 0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)
--neu-primary Brand color for active controls and emphasis Shared by other Core consumers; scope the override. #007aff
--neu-primary-dark Dark brand shade; outline and ghost Button text in the light theme Shared by other Core consumers; scope the override. #005fcc
--neu-primary-fg Foreground drawn over the primary background Shared by other Core consumers; scope the override. #ffffff
--neu-primary-solid Solid brand action background Shared by other Core consumers; scope the override. #006ee6
--neu-primary-solid-fg Foreground of solid brand actions Shared by other Core consumers; scope the override. #ffffff
--neu-primary-solid-hover Hover background of solid brand actions Shared by other Core consumers; scope the override. #005fcc