Github

Confirmation Dialog

Confirmation dialogs ask users to verify important actions before proceeding.

Component variations

Colors

Contains default and error color variants

Icon

Confirmation dialog with or without icon display

Custom Button Labels

Confirmation dialog with customized button labels

Usage Guidelines

Import

Import the dialog service in your component:

my.component.ts

Copy code

Basic Implementation

Inject the VdConfirmationDialogService and call the confirm() method:

my.component.ts

Copy code

Service API Overview

The VdConfirmationDialogService provides a single method to open confirmation dialogs:

confirm(config: VdConfirmationDialogConfig): Promise

Opens a confirmation dialog with the provided configuration and returns a Promise that resolves when the user interacts with the dialog.

Primary Dialog Implementation

Use primary dialog for general confirmations:

primary-dialog.ts

Copy code

Error Dialog Implementation

Use error dialog for destructive or critical actions:

error-dialog.ts

Copy code

Without Icon

Hide the icon for simpler dialogs:

no-icon-dialog.ts

Copy code

Custom Button Labels

Customize button labels for specific contexts:

custom-labels-dialog.ts

Copy code

API Reference

Configuration Object (VdConfirmationDialogConfig)

Properties passed to the confirm() method:

Property
Type
Required
Default
Description
title
string
Yes
N/A
The title text displayed in the dialog
description
string
No
'...'
The description/content text displayed in the dialog
color
'default' | 'error'
No
'default'
Color variant of the dialog. Affects icon background and confirm button style
icon
string
No
undefined
Icon name to display in the dialog. If not provided, no icon is shown
position
'top-center' | 'center'
No
'top-center'
Position of the dialog. top-center slides from top, center scales in the middle
cancelLabel
string
No
'Cancel'
Label text for the cancel button
confirmLabel
string
No
'Confirm'
Label text for the confirm button

Best Practices

When to Use

  • When users need to confirm important or irreversible actions
  • Before deleting data or performing destructive operations
  • When saving or discarding changes
  • To confirm navigation away from unsaved work
  • For logout or session termination confirmations

When Not to Use

  • For simple notifications that don't require user action
  • When the action is easily reversible
  • For displaying detailed information (use a modal instead)
  • When multiple options are needed (use a dropdown or menu)
  • For form validation errors (use inline validation)

Design Guidelines

  • Keep titles short and action-oriented (e.g., "Delete File")
  • Use clear, concise descriptions that explain the consequences
  • Use error variant for destructive actions like delete
  • Make button labels specific to the action (e.g., "Delete" instead of "OK")
  • Place the primary action (confirm) on the right side
  • Ensure the cancel option is always available
  • Use icons to reinforce the dialog's purpose
  • Avoid using confirmation dialogs for trivial actions

Service playground

Customize the dialog configuration below and click the button to open it

example.ts

Copy code