ConfirmPopup | Neural UI v2

Usage

Bind open and handle accepted or rejected by closing the surface. Unlike a dropdown, this confirmation is not a column filter or a tooltip. The application decides what acceptance means; Core never executes your destructive action. Use localized title, message and action labels.

Examples

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

Events: 0

Try and configure

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

Events: 0

message

Advanced options · 3

<button neu-button (neuClick)="open.set(true)">
  {{ t("Request confirmation", "Solicitar confirmación") }}</button
><neu-confirm-popup
  [open]="open()"
  message="Continue with this action?"
  [acceptLabel]="'Confirm'"
  [rejectLabel]="'Cancel'"
  (accepted)="open.set(false); record('accepted')"
  (rejected)="open.set(false); record('rejected')"
  [title]="'Confirm action'"
/>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

import { signal } from '@angular/core';

export const open = signal(false);

State and events

Bind open and handle accepted or rejected by closing the surface. Unlike a dropdown, this confirmation is not a column filter or a tooltip. The application decides what acceptance means; Core never executes your destructive action. Use localized title, message and action labels.

Accessibility and keyboard

Tab navigates the confirmation actions. Escape rejects the open confirmation.

Key	Action
`Tab`	Move through the available confirmation actions.
`Enter`	Activate the focused accept or reject button.
`Space`	Activate the focused accept or reject button.
`Escape`	Reject the open confirmation.

API

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

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`acceptLabel`	`string`	`'Confirm'`	`[acceptLabel]`	Visible name of the confirmation or cancellation action.
`message`	`string`	`''`	`[message]`	Confirmation message describing the action to accept or cancel.
`open`	`boolean`	`false`	`[open]`	Application-owned visibility. Apply false when the requested dismissal is accepted.
`rejectLabel`	`string`	`'Cancel'`	`[rejectLabel]`	Visible name of the confirmation or cancellation action.
`title`	`string`	`''`	`[title]`	Optional visible title above projected content.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`accepted`	`void`	`(accepted)="onAccepted($event)"`	Reports the confirmation decision. Close the applied open state in the handler.
`rejected`	`void`	`(rejected)="onRejected($event)"`	Reports the confirmation decision. Close the applied open state in the handler.

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
`NeuConfirmPopupService`	`export declare class NeuConfirmPopupService { close(value: boolean): void; confirm(options: NeuConfirmPopupOptions): Promise<boolean>; readonly state: import("@angular/core").WritableSignal<NeuConfirmPopupOptions \| null>; }`

Public Types

Open a type to inspect its definition and interface fields.

NeuConfirmPopupOptionsTypeScript

import type { NeuConfirmPopupOptions } from '@neural-ui/core/confirm-popup';

// Public declaration (reference only)
export interface NeuConfirmPopupOptions {
  acceptLabel?: string;
  message: string;
  rejectLabel?: string;
  title?: string;
}

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-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-text-muted`	Secondary labels and supporting content	Shared by other Core consumers; scope the override.	`#475569`
`--neu-shadow-lg`	Surface or overlay elevation	Shared by other Core consumers; scope the override.	`0 10px 30px rgba(15, 23, 42, 0.1), 0 4px 8px rgba(15, 23, 42, 0.04)`
`--neu-z-overlay`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`400`

Related components

Use related components when your task requires a different interaction or a composed control.