ConfirmDialog
Use ConfirmDialog component when you want the user to verify or accept something.
How it works #
The ConfirmDialog component displays a modal dialog prompting the user to confirm or cancel an action, such as deleting an item. It is ideal for scenarios where user verification is required before proceeding.
How to use:
This demo shows the basic usage of
How to use:
- Add the
ConfirmDialogcomponent to your page and assign it a reference using@ref. - Trigger the dialog by calling
ShowAsyncon the referenced component, passing atitleandmessageas needed. - Await the result of
ShowAsyncto determine if the user confirmed (true) or canceled (false), and handle the outcome accordingly.
ConfirmDialog for confirming a delete operation.
<ConfirmDialog @ref="confirmDialogRef" />
<Button Color="ButtonColor.Danger" @onclick="ShowConfirmationDialogAsync"> Delete Employee </Button>
@code {
private ConfirmDialog confirmDialogRef = default!;
private async Task ShowConfirmationDialogAsync()
{
var result = await confirmDialogRef.ShowAsync(
title: "Are you sure you want to delete this item?",
message: "This action cannot be undone."
);
if (result)
{
Console.WriteLine("Item deleted.");
// Delete the item
}
else
{
Console.WriteLine("Item not deleted.");
// Do nothing
}
}
}Change buttons text and color #
You can customize the ConfirmDialog buttons to match your application's language and style. The button text and color can be changed using the
How to customize:
This demo demonstrates how to change the button text and color for the confirmation dialog.
ConfirmDialogOptions parameter.
How to customize:
- Create a
ConfirmDialogOptionsobject and set properties likeYesButtonText,NoButtonText,YesButtonColor, andNoButtonColor. - Pass the options object to
ShowAsyncwhen displaying the dialog. - The dialog will reflect your custom button labels and colors, providing a tailored user experience.
<ConfirmDialog @ref="confirmDialogRef" />
<Button Color="ButtonColor.Danger" @onclick="ShowConfirmationDialogAsync"> Delete Employee </Button>
@code {
private ConfirmDialog confirmDialogRef = default!;
private async Task ShowConfirmationDialogAsync()
{
var options = new ConfirmDialogOptions
{
YesButtonText = "Yes, delete it",
NoButtonText = "No, keep it",
YesButtonColor = ButtonColor.Danger,
NoButtonColor = ButtonColor.Info
};
var result = await confirmDialogRef.ShowAsync(
title: "Are you sure you want to delete this item?",
message: "You won't be able to revert this!",
options: options
);
if (result)
{
Console.WriteLine("Item deleted.");
// Delete the item
}
else
{
Console.WriteLine("Item not deleted.");
// Do nothing
}
}
}