Class ButtonGroupButton

Represents a single button within a SfButtonGroup, which functions as a graphical user interface element that triggers an event when clicked. The button can be customized with text, an icon, or both.

Inheritance

System.Object

SfBaseComponent

ButtonGroupButton

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 ButtonGroupButton : SfBaseComponent

Remarks

The content for the ButtonGroupButton can be defined using the Content property or by placing it directly within the component's tags.

Examples

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

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

Constructors

ButtonGroupButton()

Declaration

public ButtonGroupButton()

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.SplitButtons.ButtonGroupButton.ChildContent property instead.

Examples

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

<SfButtonGroup>
  <ButtonGroupButton Content="Left"></ButtonGroupButton>
  <ButtonGroupButton Content="Center"></ButtonGroupButton>
  <ButtonGroupButton Content="Right"></ButtonGroupButton>
</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 ButtonGroupButton.

<SfButtonGroup>
  <ButtonGroupButton CssClass="custom-style">Left</ButtonGroupButton>
  <ButtonGroupButton>Center</ButtonGroupButton>
  <ButtonGroupButton>Right</ButtonGroupButton>
</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 ButtonGroupButton components.

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

IconPosition

Gets or sets the position of the icon in the button, 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.

IsPrimary

Gets or sets a value indicating whether the button should be rendered with a visually distinct primary style.

Declaration

public bool IsPrimary { get; set; }

Property Value

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

Remarks

This property is useful for highlighting the main action in a set of buttons.

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.

Name

Gets or sets the name attribute for the button 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.

Selected

Gets or sets a value indicating whether the button is in a 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.

Value

Gets or sets the value attribute for the button 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.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

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

OnAfterRenderAsync(Boolean)

This method is invoked after the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	A boolean value that is true if this is the first time the component has been rendered; otherwise, false.

Returns

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

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

Remarks

Resets the click state of the parent SfButtonGroup after the render is complete.

OnInitializedAsync()

Initializes the component and sets its initial state.

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()

Remarks

This method is called when the component is first initialized. It sets the initial selected state and registers the button with its parent SfButtonGroup.

OnParametersSetAsync()

Handles the logic that executes when the component's parameters are set.

Declaration

protected override Task OnParametersSetAsync()

Returns

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

Remarks

This method is invoked when the component's parameters are updated. It manages changes to the Selected property based on the Mode and re-renders the component.

UpdateButtonState(Boolean)

Asynchronously updates the selection state of the button.

Declaration

protected Task UpdateButtonState(bool state)

Parameters

Type	Name	Description
System.Boolean	state	The new selection state to apply.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.