Class SfProgressButton

ProgressButton visualizes the progression of an operation to indicate the user that a process is happening in the background with visual representation. It can contain a text, an icon, svg or both.

Inheritance

System.Object

SfBaseComponent

SfProgressButton

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.SplitButtons

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfProgressButton : SfBaseComponent

Remarks

Progress Button content is either by specifying Content property or by specifying content within SfProgressButton tag directive.

Examples

In the below code example, a basic button initialized with Content property.

 
<SfProgressButton Content="Click"> 
</SfProgressButton> 

<SfProgressButton Content="Submit" />

<SfProgressButton Content="Submit" />

The following example demonstrates a basic implementation of the SfProgressButton.

<SfProgressButton Content="Submit" EnableProgress="true"></SfProgressButton>

Constructors

SfProgressButton()

Declaration

public SfProgressButton()

Properties

ChildContent

Gets or sets the child content for the SfProgressButton, which can include HTML elements.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment representing the template content. The default value is null.

Remarks

If this property is not specified, the component will be rendered using the Content property. When using the ChildContent tag directive, you can include either a string or a full HTML element. Note that the string content can also be set directly via the Content property.

Content

Gets or sets the text content of the SfProgressButton.

Declaration

public string Content { get; set; }

Property Value

Type	Description
System.String	A string that represents the text displayed on the button. The default value is System.String.Empty.

Remarks

This property is used to set a simple text label for the button. For more complex content, such as HTML elements, it is recommended to use the ChildContent property by nesting content within the <SfProgressButton> tag.

CssClass

Gets or sets a CSS class string to customize the appearance of the SfProgressButton.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	A string representing one or more CSS classes, separated by a space. The default value is System.String.Empty.

Remarks

This property allows for custom styling of the progress button by applying additional CSS classes to the component's root element.

Disabled

Gets or sets a value indicating whether the SfProgressButton is in a disabled state.

Declaration

public bool Disabled { get; set; }

Property Value

Type	Description
System.Boolean	true if the button is disabled; otherwise, false. The default value is false.

Remarks

When set to true, the button becomes non-interactive, preventing any user actions such as clicks.

Duration

Gets or sets the duration of the progress animation, in milliseconds.

Declaration

public double Duration { get; set; }

Property Value

Type	Description
System.Double	A double value that specifies the duration of the progress indicator's animation. The default value is 2000 milliseconds.

Remarks

This property controls how long the progress animation takes to complete, giving you control over the visual feedback timing.

EnableProgress

Gets or sets a value indicating whether the progress indicator UI is enabled for the SfProgressButton.

Declaration

public bool EnableProgress { get; set; }

Property Value

Type	Description
System.Boolean	true to enable the progress UI; otherwise, false. The default value is false.

Remarks

When this property is set to true, the button will display a progress indicator when an action is initiated.

EnableRtl

Gets or sets a value indicating whether Right-To-Left (RTL) rendering is enabled for the SfProgressButton.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	true if RTL is enabled; otherwise, false. The default value is false.

Remarks

Enabling this property will reverse the layout of the button's content to support right-to-left languages.

HtmlAttributes

Gets or sets a collection of additional HTML attributes that will be applied to the container element of the SfProgressButton.

Declaration

public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	A System.Collections.Generic.Dictionary<, > where the key is a string representing the attribute name and the value is the attribute's value.

Remarks

This property allows you to add custom attributes to the button's root element, such as style, aria-label, or data- attributes. Attributes can be specified as inline attributes in the component's tag or through the @attributes directive.

Examples

The following example demonstrates how to set the width of a progress button using the style attribute.

<SfProgressButton style="width:200px">
</SfProgressButton>

IconCss

Gets or sets the CSS class string for an icon to be displayed in the SfProgressButton.

Declaration

public string IconCss { get; set; }

Property Value

Type	Description
System.String	A string representing one or more CSS classes for the icon, separated by spaces. The default value is System.String.Empty.

Remarks

This property is used to add a visual icon to the button, which can enhance its appearance and provide a visual cue for the button's action.

IconPosition

Gets or sets the position of the icon relative to the button's content.

Declaration

public IconPosition IconPosition { get; set; }

Property Value

Type	Description
IconPosition	One of the IconPosition enumeration values. The default is Left.

Remarks

This property allows you to control the placement of the icon within the button. The available positions are:

• Left: The icon is placed to the left of the button's content.
• Right: The icon is placed to the right of the button's content.
• Top: The icon is placed above the button's content.
• Bottom: The icon is placed below the button's content.

IsPrimary

Gets or sets a value indicating whether the SfProgressButton should be styled as a primary button.

Declaration

public bool IsPrimary { get; set; }

Property Value

Type	Description
System.Boolean	true to apply the primary button style; otherwise, false. The default value is false.

Remarks

The primary style gives the button a distinct appearance to highlight the main action in a form or dialog.

IsToggle

Gets or sets a value indicating whether the SfProgressButton functions as a toggle button.

Declaration

public bool IsToggle { get; set; }

Property Value

Type	Description
System.Boolean	true if the button has a toggle functionality; otherwise, false. The default value is false.

Remarks

When this property is set to true, the button will maintain an active state after being clicked, and a subsequent click will deactivate it.

OnClick

Gets or sets an event callback that is raised when the button is clicked.

Declaration

public EventCallback<MouseEventArgs> OnClick { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<Microsoft.AspNetCore.Components.Web.MouseEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> of type Microsoft.AspNetCore.Components.Web.MouseEventArgs that is invoked when the button is successfully clicked.

Remarks

This event is triggered when the user clicks the button. It allows you to define custom actions to be performed upon a click.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

ClickAsync()

Programmatically triggers the click action on the SfProgressButton.

Declaration

public Task ClickAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous click operation.

Remarks

This method simulates a user click, which triggers the OnClick event and sets focus to the button.

Examples

The following example demonstrates how to programmatically click the button.

<SfProgressButton @ref="ProgressButtonRef" Content="Click Target" OnClick="@OnClickHandler"></SfProgressButton>
<button class="e-btn" @onclick="TriggerClick">Click Progress Button</button>
@code {
    private SfProgressButton ProgressButtonRef;
    private bool isClicked;
    private async Task TriggerClick()
    {
        await this.ProgressButtonRef.ClickAsync();
    }
    private void OnClickHandler(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        // This will be executed when ClickAsync is called.
        isClicked = true;
    }
}

EndProgressAsync()

Instantly completes the progress indication on the SfProgressButton.

Declaration

public Task EndProgressAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous operation of completing the progress.

Remarks

This method sets the progress to 100% and stops the animation, visually indicating that the operation is complete.

Examples

The following example demonstrates how to complete the progress on a button.

<SfProgressButton @ref="ProgressButtonRef" Content="Process"></SfProgressButton>
<button class="e-btn" @onclick="Start">Start</button>
<button class="e-btn" @onclick="Complete">Complete</button>
@code {
    private SfProgressButton ProgressButtonRef;
    private async Task Start()
    {
        await this.ProgressButtonRef.StartAsync(20);
    }
    private async Task Complete()
    {
        await this.ProgressButtonRef.EndProgressAsync();
    }
}

FocusAsync()

Sets focus to the SfProgressButton component.

Declaration

public Task FocusAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous focus operation.

Remarks

This method programmatically sets the focus to the button element, allowing for keyboard interactions.

Examples

The following example demonstrates how to focus the progress button.

<SfProgressButton @ref="ProgressButtonRef" Content="Focus Me"></SfProgressButton>
<button class="e-btn" @onclick="FocusBtn">Focus Progress Button</button>
@code {
    private SfProgressButton ProgressButtonRef;
    private async Task FocusBtn()
    {
        await this.ProgressButtonRef.FocusAsync();
    }
}

OnAfterRenderAsync(Boolean)

Handles the component's rendering logic after it has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	A boolean value that indicates whether this is the first time the component has been rendered.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous after-render operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

Remarks

On the first render, this method invokes the created event, sets the spinner position, and adds the necessary aria attributes for accessibility.

OnInitializedAsync()

Initializes the component and sets the icon CSS class if an icon is specified.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous initialization operation.

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Sets the component parameters and updates the button's CSS class based on its state.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous parameter setting operation.

StartAsync(Double)

Starts the progress indication on the SfProgressButton.

Declaration

public Task StartAsync(double percent = 0)

Parameters

Type	Name	Description
System.Double	percent	Specifies the initial percentage of progress to display. The default value is 0.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous start operation.

Remarks

This method initiates the visual progress indicator on the button, which can be a spinner or a progress bar, depending on the configuration. It also sets focus to the button.

Examples

The following example demonstrates how to start the progress on a button.

<SfProgressButton @ref="ProgressButtonRef" Content="Start Progress"></SfProgressButton>
<button class="e-btn" @onclick="Start">Start</button>
@code {
    private SfProgressButton ProgressButtonRef;
    private async Task Start()
    {
        // Starts the progress at 20%
        await this.ProgressButtonRef.StartAsync(20);
    }
}

StopAsync()

Stops or pauses the progress indication on the SfProgressButton.

Declaration

public Task StopAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous stop operation.

Remarks

This method halts the progress animation. The progress indicator remains visible at its current state.

Examples

The following example demonstrates how to stop the progress on a button.

<SfProgressButton @ref="ProgressButtonRef" Content="Process"></SfProgressButton>
<button class="e-btn" @onclick="Start">Start</button>
<button class="e-btn" @onclick="Stop">Stop</button>
@code {
    private SfProgressButton ProgressButtonRef;
    private async Task Start()
    {
        await this.ProgressButtonRef.StartAsync(10);
    }
    private async Task Stop()
    {
        await this.ProgressButtonRef.StopAsync();
    }
}