DxButton Class

A Button component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxButton :
    DxButtonBase

Remarks

The DevExpress Button for Blazor (<DxButton>) allows you to add a stylized button to your project and handle its click.

Button

NOTE

Online Demo: Button

Add Button to a Project

To add the <DxButton> component to an application, follow the steps below:

  • Create and configure the application as described in the Create a New Blazor Application article.
  • Add the <DxButton/> markup to your application.
  • Configure the component (see the sections below).

Button Content and Appearance

Use the Text property to specify the button's text.

To configure the button's appearance, specify the RenderStyle and RenderStyleMode properties. All the Bootstrap styles are available.

<DxButton RenderStyle="ButtonRenderStyle.Primary" RenderStyleMode="ButtonRenderStyleMode.Contained" Text="Click me!" />

Assign the icon's CSS class to the IconCssClass property to add an icon to your button. The IconPosition property specifies the icon position (before or after the text).

<DxButton RenderStyle="ButtonRenderStyle.Dark" Text="Undo" Title="Undo the last action." IconCssClass="undo" style="margin-right: 0.5em;"/>
<DxButton RenderStyle="ButtonRenderStyle.Dark" Text="Redo" Title="Restore the previously undone action." IconCssClass="redo" IconPosition="ButtonIconPosition.AfterText" />

Button with icons

To hide the button, set the Visible property to false.

NOTE

Online Demo: Button — Icons

Handle the Click Event

Handle the Click event to respond to the button's click.

<DxButton ...
    Click="@Handler">

@code {
    // ...
    void Handler(MouseEventArgs args) {
        Console.WriteLine("I am clicked!");
    }
}

To use the button as a form submit, set the SubmitFormOnClick option to true.

Set the Enabled property to false to disable the button.

<DxButton RenderStyle="ButtonRenderStyle.Primary" Text="Disabled button" Enabled="false" />

Disabled Button

Custom Content

You can implement custom content for your button and customize the button's appearance and behaviour.

<DxButton RenderStyle="ButtonRenderStyle.Info" Click="@Like" IconCssClass="like" Text="Like">
    @context
    <span style="width: 0.8em; margin-left: 8px;">@(likes < 10 ? likes.ToString() : "9")</span>
</DxButton>

@code {
    int likes;
    protected override void OnInitialized() {
        likes = 1;
    }
    void Like(DxButtonClickEventArgs args) {
        likes++;
        InvokeAsync(StateHasChanged);
    }
}
NOTE

Online Demo: Button — Custom Content

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.JSInteropProxyBase>
DxButtonBase
DxButton
See Also