Native Events in Blazor Button Component

23 Apr 20242 minutes to read

You can define the native event using event attribute in component. The value of attribute is treated as an event handler. The event specific data will be available in event arguments.

The different event argument types for each event are,

  • Focus Events - UIFocusEventArgs
  • Mouse Events - UIMouseEventArgs
  • Keyboard Events - UIKeyboardEventArgs
  • Touch Events – UITouchEventArgs

List of native events supported

The following native event support has been provided to the Button component:

List of Native events        
onclick onblur onfocus onfocusout  
onmousemove onmouseover onmouseout onmousedown onmouseup
ondblclick onkeydown onkeyup onkeypress  
ontouchend onfocusin onmouseup ontouchstart  

How to bind click event to Button

The onclick attribute is used to bind the click event for button. Here, we have explained about the sample code snippets of toggle button.

@using Syncfusion.Blazor.Buttons

<SfButton @ref="ToggleBtn" @onclick="onToggleClick" CssClass="e-flat" IsToggle="true" IsPrimary="true" Content="@Content"></SfButton>

@code {
    SfButton ToggleBtn;
    public string Content = "Play";
    private void onToggleClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
        if (ToggleBtn.Content == "Play")
            this.Content = "Pause";
            this.Content = "Play";

Blazor Native Event Button