Class SfButton

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

Inheritance

System.Object

SfBaseComponent

SfButton

Implements

System.IAsyncDisposable

Inherited Members

SfBaseComponent.DisposeAsync()

Namespace: Syncfusion.Blazor.Toolkit.Buttons

Assembly: Syncfusion.Blazor.Toolkit.dll

Syntax

public class SfButton : SfBaseComponent, IAsyncDisposable

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.

Security: This component is XSS-safe through Blazor's automatic HTML encoding. User-provided content in Content is automatically escaped. When using Syncfusion.Blazor.Toolkit.Buttons.SfButton.ChildContent, ensure you trust the source of any HTML to prevent XSS vulnerabilities.

Performance: CSS class composition is optimized using StringBuilder to minimize memory allocations during parameter updates.

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

public string Content { get; set; }

Property Value

Type	Description
System.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.Toolkit.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

public EventCallback<object> Created { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>	An Microsoft.AspNetCore.Components.EventCallback<> 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

public string CssClass { get; set; }

Property Value

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

public bool Disabled { get; set; }

Property Value

Type	Description
System.Boolean	`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" />

HtmlAttributes

Additional HTML attributes applied to the root button element. Captures unmatched attributes like title, data-*, etc.

Declaration

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

Property Value

Type
System.Collections.Generic.Dictionary<System.String, System.Object>

Remarks

This property has a public setter to support Blazor's component parameter binding mechanism, which requires writable properties for parameter updates. This is an architectural requirement of the Blazor framework and is not considered a code smell in this context.

IconCss

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

Declaration

public string IconCss { get; set; }

Property Value

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

public IconPosition IconPosition { get; set; }

Property Value

Type	Description
IconPosition	A IconPosition enumeration value specifying the icon position. The default is Right, Top, and Bottom.

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

public virtual bool IsPrimary { get; set; }

Property Value

Type	Description
System.Boolean	`true` to use the primary style. The default value is `false`.

Remarks

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

This property is virtual to allow derived components to override the default behavior. overrides this property to return true by default, reflecting the FAB design convention of always rendering as a primary action button.

Examples

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

IsToggle

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

Declaration

public bool IsToggle { get; set; }

Property Value

Type	Description
System.Boolean	`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" />

OnClick

Gets or sets an event callback raised when the button is clicked through UI interaction.

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<> representing the click event handler.

Remarks

The OnClick event is triggered for user-initiated clicks on the button. Programmatic invocations can call the Syncfusion.Blazor.Toolkit.Buttons.SfButton.HandleClickAsync(Microsoft.AspNetCore.Components.Web.MouseEventArgs) helper instead.

Examples

<SfButton OnClick="@Clicked" Content="Click Me" />
@code {
    private void Clicked(MouseEventArgs args)
    {
        // Handle click event
    }
}

Type

Gets or sets the type of the button to control its form behavior.

Declaration

public ButtonType Type { get; set; }

Property Value

Type	Description
ButtonType	A ButtonType enumeration value. The default is Button.

Remarks

Set Submit to trigger form validation and submission, or Reset to clear all form fields back to their initial values. The default Button does not interact with forms.

Examples

<SfButton Type="ButtonType.Submit" Content="Submit" />
<SfButton Type="ButtonType.Reset" Content="Clear" />

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

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

Implements

System.IAsyncDisposable