New to Telerik UI for Blazor? Download free 30-day trial

Dialog Action Buttons

The Dialog provides a dedicated area for action buttons. They enable the application to provide specific interaction to users.

To specify action buttons in the Dialog, use the DialogButtons tag.

Button Layout

The Dialog action buttons can render in a few different layout configurations. This depends on the ButtonsLayout parameter of the component. It expects a member of the DialogButtonsLayout enum:

  • Start
  • Center
  • End
  • Stretched (default value)


The following example demonstrates all supported layout options for the Dialog action buttons.

Using Dialog ButtonsLayout

<TelerikDialog @ref="@DialogRef"
               Title="Select Buttons Layout"
        <TelerikRadioGroup Data="@ButtonLayouts"
        <TelerikButton ThemeColor="primary">OK</TelerikButton>

@code {
    private TelerikDialog DialogRef { get; set; }

    private bool DialogVisible { get; set; } = true;

    private DialogButtonsLayout SelectedButtonLayout { get; set; } = DialogButtonsLayout.End;

    private async Task OnRadioChange(object newValue)
        DialogRef.Refresh(); // Refresh() is needed to re-render the Dialog content.

    private List<DialogModel> ButtonLayouts { get; set; } = new List<DialogModel>()
        new DialogModel() { Text = "Start", Value = DialogButtonsLayout.Start },
        new DialogModel() { Text = "End", Value = DialogButtonsLayout.End },
        new DialogModel() { Text = "Center", Value = DialogButtonsLayout.Center },
        new DialogModel() { Text = "Stretch", Value = DialogButtonsLayout.Stretch }

    public class DialogModel
        public string Text { get; set; }
        public DialogButtonsLayout Value { get; set; }

See Also

In this article