Getting Started with Blazor ProgressButton Component

4 Nov 20254 minutes to read

This section explains how to include the Blazor ProgressButton component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code.

To get started quickly with the ProgressButton component in Blazor, refer to this video or the GitHub sample.

Prerequisites

Create a new Blazor App in Visual Studio

Create a Blazor WebAssembly App using Visual Studio via Microsoft templates or the Syncfusion® Blazor Extension.

Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App

To add the Blazor ProgressButton component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install Syncfusion.Blazor.SplitButtons and Syncfusion.Blazor.Themes. Alternatively, use the following Package Manager commands:

Install-Package Syncfusion.Blazor.SplitButtons -Version 32.1.19
Install-Package Syncfusion.Blazor.Themes -Version 32.1.19

NOTE

Syncfusion® Blazor components are available on nuget.org. Refer to the NuGet packages topic for the available package list with component details.

Prerequisites

Create a new Blazor App in Visual Studio Code

Create a Blazor WebAssembly App using Visual Studio Code via Microsoft templates or the Syncfusion® Blazor Extension.

Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`).

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App

  • Press Ctrl+` to open the integrated terminal in Visual Studio Code.
  • Ensure you are in the project root directory where your .csproj file is located.
  • Run the following commands to install the Syncfusion.Blazor.SplitButtons and Syncfusion.Blazor.Themes NuGet packages and ensure all dependencies are installed.
dotnet add package Syncfusion.Blazor.SplitButtons -v 32.1.19
dotnet add package Syncfusion.Blazor.Themes -v 32.1.19
dotnet restore

NOTE

Syncfusion® Blazor components are available on nuget.org. Refer to the NuGet packages topic for the available package list with component details.

Register Syncfusion® Blazor Service

Open ~/_Imports.razor and import the Syncfusion.Blazor and Syncfusion.Blazor.SplitButtons namespaces.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SplitButtons

Now, register the Syncfusion® Blazor service in the ~/Program.cs file of your Blazor WebAssembly app.

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();
....

Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet and script references in the <head> section of the ~/index.html file.

<head>
    ....
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

NOTE

Check the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in a Blazor application. Also, see the Adding script references topic to learn different approaches for adding script references.

Add Blazor ProgressButton component

Add the Syncfusion® Blazor ProgressButton component in the ~/Pages/Index.razor file.

<SfProgressButton Content="Spin Left"></SfProgressButton>
  • Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor ProgressButton component in the default web browser.
Blazor ProgressButton Component

See also

NOTE

Explore the Blazor ProgressButton example that shows how to render and configure the ProgressButton.