Class Button

Represents a single button within a SfButtonGroup. The button can display text, an icon, or both, and triggers an action when clicked.

Inheritance

System.Object

SfBaseComponent

Button

Implements

System.IAsyncDisposable

Inherited Members

SfBaseComponent.DisposeAsync()

Namespace: Syncfusion.Blazor.Toolkit.Buttons

Assembly: Syncfusion.Blazor.Toolkit.dll

Syntax

public class Button : SfBaseComponent, IAsyncDisposable

Remarks

The content for the Button can be defined using the Content property or by placing markup inside the component tag.

Examples

This example demonstrates how to create a basic SfButtonGroup with several Button components.

<SfButtonGroup>
  <Button Content="Left"></Button>
  <Button Content="Center"></Button>
  <Button Content="Right"></Button>
</SfButtonGroup>

This example demonstrates how to create a basic SfButtonGroup with several Button components.

<SfButtonGroup>
  <Button Content="Left"></Button>
  <Button Content="Center"></Button>
  <Button Content="Right"></Button>
</SfButtonGroup>

Constructors

Button()

Declaration

public Button()

Properties

Content

Gets or sets the text content to be displayed on the button.

Declaration

public string Content { get; set; }

Property Value

Type	Description
System.String	A string representing the text to be displayed. The default value is `string.Empty`.

Remarks

For rendering complex HTML content, it is recommended to use the Syncfusion.Blazor.Toolkit.Buttons.Button.ChildContent property instead.

Examples

The following example demonstrates how to set the text content for Button components.

<SfButtonGroup>
  <Button Content="Left"></Button>
  <Button Content="Center"></Button>
  <Button Content="Right"></Button>
</SfButtonGroup>

CssClass

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

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	A string that represents the CSS class. The default value is `string.Empty`.

Remarks

You can add multiple classes separated by spaces to apply custom styles to the button.

Examples

The following example demonstrates how to apply a custom CSS class to a Button.

<SfButtonGroup>
  <Button CssClass="custom-style">Left</Button>
  <Button>Center</Button>
  <Button>Right</Button>
</SfButtonGroup>

Disabled

Gets or sets a value indicating whether the button is disabled.

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

A disabled button cannot be clicked or focused, and its appearance will be altered to indicate its inactive state.

IconCss

Gets or sets a CSS class string to include an icon on the button.

Declaration

public string IconCss { get; set; }

Property Value

Type	Description
System.String	A string representing the icon's CSS class, with support for multiple classes separated by spaces. The default value is `string.Empty`.

Remarks

This property is used to apply a CSS class that defines the button's icon, typically by setting a background image.

Examples

The following example demonstrates how to add icons to Button components.

<SfButtonGroup>
  <Button IconCss="e-icons e-cut">Cut</Button>
  <Button IconCss="e-icons e-copy">Copy</Button>
  <Button IconCss="e-icons e-paste">Paste</Button>
</SfButtonGroup>

IconPosition

Gets or sets the position of the icon relative to the text content.

Declaration

public IconPosition IconPosition { get; set; }

Property Value

Type	Description
IconPosition	One of the IconPosition enumeration values that specifies the icon's placement. The default value is Left.

Remarks

The available positions are:

Left: Places the icon to the left of the text.

Right: Places the icon to the right of the text.

Top: Places the icon above the text.

Bottom: Places the icon below the text.

Examples

Place an icon to the right of the text.

<SfButtonGroup>
  <Button IconCss="e-icons e-save" IconPosition="IconPosition.Right">Save</Button>
</SfButtonGroup>

IsToggle

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

Declaration

public bool IsToggle { get; set; }

Property Value

Type	Description
System.Boolean	`true` to enable toggle functionality; otherwise, `false`. The default is `false`.

Remarks

When IsToggle is set to true, the button persists in a selected state after being clicked and can be deselected by clicking it again.

Examples

Enable toggle behavior so the button stays selected after a click.

<SfButtonGroup Mode="SelectionMode.Multiple">
  <Button IsToggle="true">Toggle Me</Button>
</SfButtonGroup>

Name

Gets or sets the name attribute for the button's input element.

Declaration

public string Name { get; set; }

Property Value

Type	Description
System.String	A string that represents the name of the button. The default value is `string.Empty`.

Remarks

The Name property is used to set the name attribute of the underlying HTML input element, which is useful for form submissions.

Examples

Use the Name property to group radio inputs when using single-selection mode.

<SfButtonGroup Mode="SelectionMode.Single">
  <Button Name="group1">A</Button>
  <Button Name="group1">B</Button>
</SfButtonGroup>

Selected

Gets or sets a value indicating whether the button is in the selected state.

Declaration

public bool Selected { get; set; }

Property Value

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

Remarks

This property is particularly useful when the parent SfButtonGroup is configured for single or multiple selection modes using the Mode property.

Examples

The following example demonstrates how to bind and toggle the Selected state from a parent component.

<SfButtonGroup Mode="SelectionMode.Multiple">
  <Button Selected="@isSelected">Option</Button>
</SfButtonGroup>
@code {
  bool isSelected = true;
}

Value

Gets or sets the value attribute for the button's input element.

Declaration

public string Value { get; set; }

Property Value

Type	Description
System.String	A string that represents the value of the button. The default value is `string.Empty`.

Remarks

The Value property is used to set the value attribute of the underlying HTML input element, which is useful for form submissions.

Examples

Set a custom Value when using the group within a form to identify the selected option.

<SfButtonGroup Mode="SelectionMode.Single">
  <Button Value="left">Left</Button>
  <Button Value="right">Right</Button>
</SfButtonGroup>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

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

Implements

System.IAsyncDisposable