Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxButton Class

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
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

Run Demo: Button

#Add a Button to a Project

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

  1. 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.
  2. Add the <DxButton/> markup to a .razor file.
  3. Configure the component: specify the button’s content and appearance, handle button clicks, and so on (see the sections below).

#.NET 8 and .NET 9 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.

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

Button Styles

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

<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.

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.

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

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

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

Button - Size mode

For more information, refer to Size Modes.

#Handle the Click Event

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

Razor
<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.

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

Disabled Button

#Custom Content

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

Button Custom Content

<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++;
    }
}

Run Demo: Button — Custom Content

#Troubleshooting

If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.

See Also