Blazor Dialog Overview

The Blazor Dialog component is a modal popup that brings information to the user. It provides actions through its action buttons to prompt the user for input or to ask for a decision. The component can also contain more complex UI elements that require the attention of the user.

The Dialog component and its predefined options aim to deliver user experience similar to default browser dialogs. For more functionalities such as drag and resize, use the Window component.

Telerik UI for Blazor Ninja image

The Dialog component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Creating Blazor Dialog

  1. Add the TelerikDialog tag to a Razor file.

  2. Set the Visible parameter to a bool object. It supports one-way and two-way binding.

  3. Set the Title property to a string object.

  4. Set the Dialog content through the DialogContent RenderFragment parameter

  5. (optional) Configure the DialogButtons inside the TelerikDialog tag.

A basic configuration of the Telerik Dialog.

@* An example of the Dialog basic implementation. *@

<TelerikDialog @bind-Visible="@Visible"
        A new version of <strong>Telerik UI for Blazor</strong> is available. Would you like to download and install it now?
        <TelerikButton OnClick="@(() => { Visible = false; })">Skip this version</TelerikButton>
        <TelerikButton OnClick="@(() => { Visible = false; })">Remind me later</TelerikButton>
        <TelerikButton OnClick="@(() => { Visible = false; })" ThemeColor="primary">Install update</TelerikButton>

@code {
    private bool Visible { get; set; } = true;
    private string Title { get; set; } = "Software Update";

Predefined Dialogs

Predefined Dialogs are styled substitutes to the standard browser dialogs - confirm, alert and prompt. Read more about the Blazor Predefined Dialogs.

The Dialog allows header customization and gives the option to toggle the close button. Read more about the Dialog Header.

Action Buttons

The Dialog provides options for rendering action buttons and customizing their text and layout. Read more about the Dialog Action Buttons.


The Blazor Dialog fires a VisibleChanged event to customize the application behavior and respond to user actions. Read more about the Blazor Dialog events.

Dialog Parameters

The Blazor Dialog provides various parameters to configure the component. Also check the Dialog public API.

Parameter Type and Default Value Description
ButtonsLayout DialogButtonsLayout enum
The layout of the actions button in the footer. See more in the Action Buttons article).
Class string A custom CSS class to the <div class="k-window k-dialog"> element.
CloseOnOverlayClick bool Defines if clicking on the modal overlay should close the Dialog.
FocusedElementSelector string The CSS selector of the initially focused item on open. By default, it is the first focusable item in the Dialog.
Height string The height of the Dialog in any supported CSS unit.
ShowCloseButton bool
Defines if the component will render a Close button in the titlebar. See more in the Header article.
ThemeColor string A predefined color scheme for the Dialog, especially the titlebar. Use the available members of the static class ThemeConstants.Dialog.ThemeColor.
Title string The Dialog title.
Visible bool Defines the Dialog visibility.
Width string The width of the Dialog in any supported CSS unit.

Dialog Reference and Methods

The Dialog methods are accessible through its reference.

Method Description
Refresh Re-renders the Dialog.
The Dialog is rendered as a child of the TelerikRootComponent, instead of where it is declared. As a result, it doesn't automatically refresh when its content is updated. In such cases, the Refresh method comes in handy to ensure that the Dialog content is up-to-date.

Get a reference to the Dialog and use its methods.

@* This code snippet showcases an example usage of the Refresh() method. *@

<TelerikButton  OnClick="OpenDialog">Open Dialog</TelerikButton>

<TelerikDialog @ref="DialogRef" @bind-Visible="_dialogVisible">
        <p role="status">Current count: @_currentCount</p>
        <TelerikButton OnClick="IncrementCount">Increment Count</TelerikButton>
        <TelerikButton OnClick="@(() => { _dialogVisible = false; })">Close</TelerikButton>

@code {
    TelerikDialog DialogRef;

    private bool _dialogVisible;

    private int _currentCount = 0;

    private void IncrementCount()

        DialogRef.Refresh(); //Need refresh to reflect the change here.

    private void OpenDialog()
        _dialogVisible = true;

Next Steps

See Also

In this article