Blazor Confirm Dialog

Use Blazor Bootstrap confirm dialog component if you want the user to verify or accept something.

Examples#

Razor 
<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Danger" @onclick="ShowConfirmationAsync"> Delete Employee </Button>

@code {
    private ConfirmDialog dialog = default!;

    private async Task ShowConfirmationAsync()
    {
        var confirmation = await dialog.ShowAsync(
            title: "Are you sure you want to delete this?",
            message1: "This will delete the record. Once deleted can not be rolled back.",
            message2: "Do you want to proceed?");

        if (confirmation)
        {
            // do something
        }
        else
        {
            // do something
        }
    }
}

Dynamic component as confirm dialog#

Render different components dynamically within the confirm dialog without iterating through possible types or using conditional logic.
If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value.
In the below example, we used Toast Service to show the user confirmation.
Razor 
<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Danger" @onclick="DeleteEmployeeAsync"> Delete Employee </Button>

@code {
    private ConfirmDialog dialog = default!;

    [Inject] ToastService ToastService { get; set; } = default!;

    private async Task DeleteEmployeeAsync()
    {
        var parameters = new Dictionary<string, object>();
        parameters.Add("EmployeeId", 321);

        var confirmation = await dialog.ShowAsync<EmployeeDemoComponent>("Are you sure you want to delete this employee?", parameters);

        if (confirmation)
        {
            // call API to delete the employee
            // show acknowledgment to the user
            ToastService.Notify(new ToastMessage(ToastType.Success, $"Employee deleted successfully."));
        }
        else
            ToastService.Notify(new ToastMessage(ToastType.Secondary, $"Delete action canceled."));
    }
}
EmployeeDemoComponent.razor
Razor 
<div class="row">
    <div class="col-5 col-md-3 text-end">Employee Id :</div>
    <div class="col-7 col-md-9">@EmployeeId</div>
</div>
<div class="row">
    <div class="col-5 col-md-3 text-end">First Name :</div>
    <div class="col-7 col-md-9">@employee?.FirstName</div>
</div>
<div class="row">
    <div class="col-5 col-md-3 text-end">Last Name :</div>
    <div class="col-7 col-md-9">@employee?.LastName</div>
</div>

@code {
    private Employee? employee;

    [Parameter] public int EmployeeId { get; set; }

    protected override void OnInitialized()
    {
        // get employee with {EmployeeId} from DB

        employee = new Employee { FirstName = "Vikram", LastName = "Reddy" };

        base.OnInitialized();
    }
}

Change buttons text and color#

Use ConfirmDialogOptions to change the text and color of the button.
Razor 
<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Primary" @onclick="ShowSaveConfirmationAsync"> Save Employee </Button>

@code {
    private ConfirmDialog dialog = default!;

    private async Task ShowSaveConfirmationAsync()
    {
        var options = new ConfirmDialogOptions
            {
                YesButtonText = "OK",
                YesButtonColor = ButtonColor.Success,
                NoButtonText = "CANCEL",
                NoButtonColor = ButtonColor.Danger
            };

        var confirmation = await dialog.ShowAsync(
            title: "Simple Confirm Dialog",
            message1: "Do you want to proceed?",
            confirmDialogOptions: options);

        if (confirmation)
        {
            // do something
        }
        else
        {
            // do something
        }
    }
}

Optional sizes#

Confirm dialog have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
Razor 
<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Primary" @onclick="() => ShowConfirmationAsync(DialogSize.Small)"> Small Confirm Dialog </Button>
<Button Color="ButtonColor.Primary" @onclick="() => ShowConfirmationAsync(DialogSize.Large)"> Large Confirm Dialog </Button>
<Button Color="ButtonColor.Primary" @onclick="() => ShowConfirmationAsync(DialogSize.ExtraLarge)"> Extra Large Confirm Dialog </Button>

@code {
    private ConfirmDialog dialog = default!;

    private async Task ShowConfirmationAsync(DialogSize size)
    {
        var options = new ConfirmDialogOptions { Size = size };

        var confirmation = await dialog.ShowAsync(
            title: "Simple Confirm Dialog",
            message1: "Do you want to proceed?",
            confirmDialogOptions: options);

        if (confirmation)
        {
            // do something
        }
        else
        {
            // do something
        }
    }
}

Scrolling long content#

When dialogs become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
You can also create a scrollable dialog that allows scroll the dialog body by updating DialogOptions.IsScrollable="true".

Vertically centered#

Add DialogOptions.IsVerticallyCentered="true" to vertically center the confirm dialog.

Disable auto focus on the yes button#

By default, auto focus on the "Yes" button is enabled.
To disabe the autofocus, set AutoFocusYesButton = false on the ConfirmDialogOptions.
If you like Blazor Bootstrap, give it a star on GitHub!
Blazor Bootstrap Blazor Bootstrap
  • Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
  • Code licensed Apache License 2.0.
  • Currently v3.0.0-preview.3.
Links
Guides
Community