Search results

Action Buttons

You can include action buttons to the toast control by adding the ToastButtonModelProp property. The collection of Blazor button models can be bound to the Model property inside the ToastButtonModelProps property. You can also include the click event callback function for each button.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Buttons
@using Syncfusion.EJ2.Blazor.Notifications

<EjsToast @ref="ToastObj" Title="Anjolie Stokes" Width="280" Height="120" Content="@ToastContent" Icon="e-laura">
    <ToastPosition X="Right" Y="Bottom"></ToastPosition>
    <ToastButtonModelProps>
        <ToastButtonModelProp Model="@IgnoreBtnObj" Clicked="@OnIgnore"></ToastButtonModelProp>
        <ToastButtonModelProp Model="@ReplyBtnObj" Clicked="@OnIgnore"></ToastButtonModelProp>
    </ToastButtonModelProps>
</EjsToast>
<div class="col-lg-12 col-sm-12 col-md-12 center">
    <div id="toastBtnDefault" style="margin: auto; text-align: center">
        <EjsButton @onclick="@ShowOnClick"> Show Toast </EjsButton>
    </div>
</div>

<style>
    .e-toast-icon.e-laura.e-icons {
        border-radius: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url(https://ej2.syncfusion.com/vue/demos/src/toast/resource/laura.png);
        height: 44px !important;
        margin: 0;
        width: 60px;
    }
    #elementToastTime .e-toast-message {
        padding: 10px;
    }
</style>

@code {
    EjsToast ToastObj;
    public string ToastContent { get;set; } = "Thanks for the update!";
    private void ShowOnClick(object args)
    {
        this.ToastObj.Show();
    }
    private ButtonModel IgnoreBtnObj = new ButtonModel
    {
        Content = "Ignore"
    };
    private ButtonModel ReplyBtnObj = new ButtonModel
    {
        Content = "reply"
    };
    private void OnIgnore(object args)
    {
        this.ToastObj.Hide();
    }
}

The output will be as follows.

Action button

See Also