Search results

Add an icons to dialog buttons

You can add icons to the dialog buttons using the DialogButton property or FooterTemplate property.

In the following code, dialog footer buttons are customized with icons using DialogButton property.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Popups
@using Syncfusion.EJ2.Blazor.Buttons

<EjsButton @onclick="@OnClicked">Open Dialog</EjsButton>
<EjsDialog @ref="DialogObj" Width="300px" ShowCloseIcon="true" CloseOnEscape="true">
    <DialogTemplates>
        <Header> <div>Delete Multiple Items</div> </Header>
        <Content> <div>Are you sure you want to permanently delete all of these items?</div> </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton ButtonModel="@DialogBtn" OnClick="@OnClick" />
        <DialogButton ButtonModel="@DialogBtn2" OnClick="@OnClick" />
    </DialogButtons>
</EjsDialog>

<style>
    a, a:hover, .highcontrast #dialog a, .highcontrast #dialog a:hover {
        color: inherit;
        text-decoration: none;
    }
    .e-btn-icon.e-icons.e-ok-icon.e-icon-left:before {
        content: '\e7ff';
    }
    .e-btn-icon.e-icons.e-close-icon.e-icon-left:before {
        content: '\e825';
    }
</style>

@code {
    EjsDialog DialogObj;

    private void OnClick(Object args)
    {
        this.DialogObj.Hide();
    }

    private void OnClicked()
    {
        this.DialogObj.Show();
    }

    public Syncfusion.EJ2.Blazor.Buttons.ButtonModel DialogBtn = new Syncfusion.EJ2.Blazor.Buttons.ButtonModel { Content = "Yes", IsPrimary = true, IconCss = "e-icons e-ok-icon" };
    public Syncfusion.EJ2.Blazor.Buttons.ButtonModel DialogBtn2 = new Syncfusion.EJ2.Blazor.Buttons.ButtonModel { Content = "No", IconCss = "e-icons e-close-icon" };
}

In the following code, dialog footer buttons are customized with icons using FooterTemplate template property.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Popups
@using Syncfusion.EJ2.Blazor.Buttons

<EjsButton @onclick="@OnClicked">Open Dialog</EjsButton>
<EjsDialog @ref="DialogObj" Width="300px" ShowCloseIcon="true" CloseOnEscape="true">
    <DialogTemplates>
        <Header> Delete Multiple Items</Header>
        <Content> Are you sure you want to permanently delete all of these items?</Content>
        <FooterTemplate><EjsButton CssClass="e-primary e-flat" @onclick="@OnBtnClicked"><span class='e-btn-icon e-icons e-ok-icon e-icon-left'></span>Yes</EjsButton><EjsButton CssClass="e-flat" @onclick="@OnBtnClicked"><span class='e-btn-icon e-icons e-close-icon e-icon-left'></span>No</EjsButton></FooterTemplate>
    </DialogTemplates>
</EjsDialog>

<style>
    a, a:hover, .highcontrast #dialog a, .highcontrast #dialog a:hover {
        color: inherit;
        text-decoration: none;
    }
    .e-btn-icon.e-icons.e-ok-icon.e-icon-left:before {
        content: '\e7ff';
    }
    .e-btn-icon.e-icons.e-close-icon.e-icon-left:before {
        content: '\e825';
    }
</style>

@code {
    EjsDialog DialogObj;

    private void OnClicked() {
        this.DialogObj.Show();
    }
    private void OnBtnClicked() {
        this.DialogObj.Hide();
    }
}

The output will be as follows.

dialog