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

object

ComponentBase

OwningComponentBase

SfOwningComponentBase

SfBaseComponent

SfProgressButton

Implements

Inherited Members

ComponentBase.Assets

ComponentBase.AssignedRenderMode

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.OnAfterRender(bool)

ComponentBase.OnInitialized()

ComponentBase.OnParametersSet()

ComponentBase.RendererInfo

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.ShouldRender()

ComponentBase.StateHasChanged()

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

OwningComponentBase.IsDisposed

OwningComponentBase.ScopedServices

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(bool)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(string, object, bool, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.SplitButtons

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfProgressButton : SfBaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

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

Content

Gets or sets the text content of the SfProgressButton.

Declaration

[Parameter]
public string Content { get; set; }

Property Value

Type	Description
string	A string that represents the text displayed on the button. The default value is 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 Syncfusion.Blazor.SplitButtons.SfProgressButton.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

[Parameter]
public string CssClass { get; set; }

Property Value

Type	Description
string	A string representing one or more CSS classes, separated by a space. The default value is 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

[Parameter]
public bool Disabled { get; set; }

Property Value

Type	Description
bool	`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

[Parameter]
public double Duration { get; set; }

Property Value

Type	Description
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

[Parameter]
public bool EnableProgress { get; set; }

Property Value

Type	Description
bool	`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

[Parameter]
public bool EnableRtl { get; set; }

Property Value

Type	Description
bool	`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.

IconCss

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

Declaration

[Parameter]
public string IconCss { get; set; }

Property Value

Type	Description
string	A string representing one or more CSS classes for the icon, separated by spaces. The default value is 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

[Parameter]
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

[Parameter]
public bool IsPrimary { get; set; }

Property Value

Type	Description
bool	`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

[Parameter]
public bool IsToggle { get; set; }

Property Value

Type	Description
bool	`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

[Parameter]
public EventCallback<MouseEventArgs> OnClick { get; set; }

Property Value

Type	Description
EventCallback<MouseEventArgs>	An EventCallback<TValue> of type 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
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

ClickAsync()

Programmatically triggers the click action on the SfProgressButton.

Declaration

public Task ClickAsync()

Returns

Type	Description
Task	A 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
Task	A 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
Task	A 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(bool)

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

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

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

Returns

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

Overrides

SfBaseComponent.OnAfterRenderAsync(bool)

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
Task	A 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
Task	A Task that represents the asynchronous parameter setting operation.

Overrides

ComponentBase.OnParametersSetAsync()

StartAsync(double)

Starts the progress indication on the SfProgressButton.

Declaration

public Task StartAsync(double percent = 0)

Parameters

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

Returns

Type	Description
Task	A 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
Task	A 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();
    }
}

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable