Class SfButton

Represents a graphical user interface ComponentBase that triggers events when clicked, supporting text, icons, SVG, or a combination as its content.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
SfBaseComponent
SfButton
SfFab
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Buttons
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfButton : SfBaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Remarks

Button content can be set using the Content property for simple strings or by embedding content within the SfButton tag. Both text and HTML elements (such as icons or SVG) are supported, allowing for a flexible UI experience.

Examples

The following code example demonstrates a basic button initialized with the Content property.

<SfButton Content="Click" />

Constructors

SfButton()

Declaration
public SfButton()

Properties

Content

Gets or sets the string content to be displayed in the SfButton component.

Declaration
[Parameter]
public string Content { get; set; }
Property Value
Type Description
string

A string value that represents the button's text. The default value is String.Empty.
Remarks

To use HTML structure within the button, specify it as child content using the Syncfusion.Blazor.Buttons.SfButton.ChildContent property.

Examples

The following code example shows how to specify button content via this property:

<SfButton Content="Submit" />

Created

Gets or sets an event callback that is invoked when the button rendering is completed.

Declaration
[Parameter]
public EventCallback<object> Created { get; set; }
Property Value
Type Description
EventCallback<object>

An EventCallback<TValue> that fires after component render.
Remarks

You can use this event to perform custom logic or initialization when the button component is rendered in the DOM for the first time.

Examples
<SfButton Created="@OnReady" Content="Loaded!" />
@code {
    private void OnReady(object args)
    {
        // Additional logic post render
    }
}

CssClass

Gets or sets one or more CSS class names to customize the visual appearance of the button.

Declaration
[Parameter]
public string CssClass { get; set; }
Property Value
Type Description
string

A string containing space-separated CSS class names. The default value is String.Empty.
Remarks

Use this property to apply one or more custom styles to the button in addition to Syncfusion built-in classes.

Examples

This example demonstrates applying a style via the CssClass property:

<SfButton CssClass="e-primary e-custom-style" />

Disabled

Gets or sets a value that determines whether the button control is enabled or disabled.

Declaration
[Parameter]
public bool Disabled { get; set; }
Property Value
Type Description
bool

true if the component is disabled; otherwise, false. The default value is false.
Remarks

When this property is set to true, all user interaction with the button is prevented.

Examples
<SfButton Content="Save" Disabled="true" />

EnableRtl

Gets or sets a value that determines whether the right-to-left (RTL) direction is enabled for the button.

Declaration
[Parameter]
public bool EnableRtl { get; set; }
Property Value
Type Description
bool

true to enable RTL support; otherwise, false. The default value is false.
Remarks

Enabling this property is beneficial for languages that are read from right to left.

Examples
<SfButton Content="عرض" EnableRtl="true" />

IconCss

Gets or sets the CSS class name(s) for including an icon or image in the button.

Declaration
[Parameter]
public string IconCss { get; set; }
Property Value
Type Description
string

A string containing one or more CSS classes for icons/images. The default value is String.Empty.
Remarks

When set, the button displays the specified icon or image alongside its content.

Examples
<SfButton IconCss="e-icons e-add" Content="Add Item" />

IconPosition

Gets or sets how the icon is positioned relative to button content.

Declaration
[Parameter]
public IconPosition IconPosition { get; set; }
Property Value
Type Description
IconPosition

A IconPosition enumeration value specifying the icon position. The default is Left.
Remarks

Position options include Left, Right, Top, and Bottom.

Examples
<SfButton IconCss="e-icons e-edit" IconPosition="IconPosition.Right" Content="Edit" />

IsPrimary

Gets or sets a value indicating whether the button is styled as a primary action button.

Declaration
[Parameter]
public virtual bool IsPrimary { get; set; }
Property Value
Type Description
bool

true to use the primary style. The default value is false.
Remarks

Primary buttons highlight important actions in the UI using distinctive styling.

Examples
<SfButton IsPrimary="true" Content="Submit" />

IsToggle

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

Declaration
[Parameter]
public bool IsToggle { get; set; }
Property Value
Type Description
bool

true for a toggleable button; otherwise, false. The default value is false.
Remarks

When enabled, each click toggles the button's active state.

Examples
<SfButton IsToggle="true" Content="Bold" />

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
RenderTreeBuilder __builder
Overrides

FocusAsync()

Asynchronously sets focus to the button, allowing programmatic keyboard or click interactions.

Declaration
public Task FocusAsync()
Returns
Type Description
Task

A Task representing the asynchronous operation.
Remarks

Use this method to programmatically set focus on the button element from code.

Examples
await buttonRef.FocusAsync();

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered.

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
bool firstRender

Set to true for the first time component rendering; otherwise gets false.
Returns
Type Description
Task

A System.Threading.Tasks.Task representing any asynchronous operation.
Overrides

OnParametersSetAsync()

Declaration
protected override Task OnParametersSetAsync()
Returns
Type
Task
Overrides

Implements