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.

<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Primary" @onclick="ShowDialogAsync"> Launch Confirm Dialog </Button>

@code {
    private ConfirmDialog dialog = default!;

    private async Task ShowDialogAsync()
    {
        var confirmation = await dialog.ShowAsync<LongContentDemoComponent>(title: "Confirm dialog title");

        if (confirmation)
        {
            // do something
        }
        else
        {
            // do something
        }
    }
}

You can also create a scrollable dialog that allows scroll the dialog body by updating DialogOptions.IsScrollable="true".

<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Primary" @onclick="ShowDialogAsync"> Launch Confirm Dialog </Button>

@code {
    private ConfirmDialog dialog = default!;

    private async Task ShowDialogAsync()
    {
        var options = new ConfirmDialogOptions { IsScrollable = true };
        var confirmation = await dialog.ShowAsync<LongContentDemoComponent>(
            title: "Confirm dialog title",
            confirmDialogOptions: options);

        if (confirmation)
        {
            // do something
        }
        else
        {
            // do something
        }
    }
}

Vertically centered #

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

<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Primary" @onclick="ShowDialogAsync"> Launch Vertically Centered Confirm Dialog </Button>

@code {
    private ConfirmDialog dialog = default!;

    private async Task ShowDialogAsync()
    {
        var options = new ConfirmDialogOptions { IsVerticallyCentered = true };
        var confirmation = await dialog.ShowAsync(
            title: "Simple Confirm Dialog",
            message1: "Do you want to proceed?",
            confirmDialogOptions: options);

        if (confirmation)
        {
            // do something
        }
        else
        {
            // do something
        }
    }
}

<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Primary" @onclick="ShowDialogAsync"> Launch Scrollable & Vertically Centered Confirm Dialog </Button>

@code {
    private ConfirmDialog dialog = default!;

    private async Task ShowDialogAsync()
    {
        var options = new ConfirmDialogOptions { IsScrollable = true, IsVerticallyCentered = true };
        var confirmation = await dialog.ShowAsync<LongContentDemoComponent>(title: "Confirm dialog title",
            confirmDialogOptions: options);

        if (confirmation)
        {
            // do something
        }
        else
        {
            // do something
        }
    }
}

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.

<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Primary" @onclick="ShowDialogAsync"> Launch Confirm Dialog </Button>

@code {
    private ConfirmDialog dialog = default!;

    private async Task ShowDialogAsync()
    {
        var confirmation = await dialog.ShowAsync<LongContentDemoComponent>(
            title: "Confirm dialog title",
            confirmDialogOptions: new ConfirmDialogOptions { AutoFocusYesButton = false }
        );

        if (confirmation)
        {
            // do something
        }
        else
        {
            // do something
        }
    }
}

If you like Blazor Bootstrap, give it a star on GitHub!

Blazor Confirm Dialog

Examples #

Dynamic component as confirm dialog #

Change buttons text and color #

Optional sizes #

Scrolling long content #

Vertically centered #

Disable auto focus on the yes button #

Links

Guides

Community