DxButton Class

A button control that supports advanced style and content customization options.

Assembly: DevExpress.Blazor.v24.1.dll

Declaration

public class DxButton :
    DxComponentBase,
    ISizeModeAccessor,
    IRequireSelfCascading

Remarks

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

Run Demo: Button

Add a Button to a Project

Follow the steps below to add the Button component to an application:

Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
Add the <DxButton/> markup to a .razor file.
Configure the component: specify the button’s content and appearance, handle button clicks, and so on (see the sections below).

.NET 8 Specifics

Blazor Button does not support static render mode. Enable interactivity to use the component in your application. Refer to the following topic for more details: Enable Interactive Render Mode.

Button Content and Appearance

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

To configure button appearance, specify the RenderStyle and RenderStyleMode properties.

<DxButton RenderStyle="ButtonRenderStyle.Primary" RenderStyleMode="ButtonRenderStyleMode.Contained" 
    Text="Primary (Contained)" />
<DxButton RenderStyle="ButtonRenderStyle.Danger" RenderStyleMode="ButtonRenderStyleMode.Outline" 
    Text="Danger (Outline)" />
<DxButton RenderStyle="ButtonRenderStyle.Link" RenderStyleMode="ButtonRenderStyleMode.Contained" 
    Text="Link" />

Assign the icon’s CSS class to the IconCssClass property to add an icon to your button. The IconPosition property specifies the icon position.

Razor
CSS

<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" />

CSS
.undo {
    width: 16px;
    height: 16px;
    background-image: url("../images/undo.svg");
    margin: 0 8px 0 0;
}
.redo {
    width: 16px;
    height: 16px;
    background-image: url("../images/redo.svg");
    margin: 0 0 0 8px;
}

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

Run Demo: Button — Icons

Size Modes

Use the SizeMode property to specify a button size. The following code snippet applies different size modes to Button components.

<DxButton Text="Small" SizeMode="SizeMode.Small" />

<DxButton Text="Medium" SizeMode="SizeMode.Medium" />

<DxButton Text="Large" SizeMode="SizeMode.Large" />

For more information, refer to Size Modes.

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!");
    }
}

If you use the NavigateUrl property together with the Click event’s handler, the browser handles the event first and then navigates to the specified URL.

To submit a form with a button click, 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" />

Custom Content

You can use the ChildContent property to add custom content to your button and customize its appearance and behavior:

Razor
CSS

<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(MouseEventArgs args) {
        likes++;
    }
}

.like {
    height: 16px;
    width: 16px;
    background-image: url("../images/like.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    margin-right: 8px;
}

Run Demo: Button — Custom Content