Class SfButtonGroup

The ButtonGroup component is a container that groups a series of buttons on a single line and supports different selection modes, such as single and multiple selections.

Inheritance
System.Object
SfBaseComponent
SfButtonGroup
Inherited Members
Namespace: Syncfusion.Blazor.SplitButtons
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfButtonGroup : SfBaseComponent
Remarks

The ButtonGroup can contain ButtonGroupButton components, as well as other button components like DropDownButton or SplitButton. To learn more about the ButtonGroup and its features, you can refer to the Syncfusion Blazor ButtonGroup documentation.

Examples

The following example demonstrates a basic ButtonGroup with several ButtonGroupButton instances.

 
<SfButtonGroup> 
<ButtonGroupButton>Left</ButtonGroupButton> 
<ButtonGroupButton>Center</ButtonGroupButton> 
<ButtonGroupButton>Right</ButtonGroupButton> 
</SfButtonGroup>

Constructors

SfButtonGroup()

Declaration
public SfButtonGroup()

Properties

Created

Gets or sets an event callback that is raised after the SfButtonGroup component has been rendered for the first time.

Declaration
public EventCallback<object> Created { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>

An Microsoft.AspNetCore.Components.EventCallback<> of type System.Object.
Remarks

This event is triggered when the component is first created, allowing for custom logic to be executed.

Examples

The following example demonstrates how to handle the Created event.

<SfButtonGroup Created="@OnButtonGroupCreated">
  <ButtonGroupButton>Left</ButtonGroupButton>
  <ButtonGroupButton>Center</ButtonGroupButton>
  <ButtonGroupButton>Right</ButtonGroupButton>
</SfButtonGroup>
@code {
    private void OnButtonGroupCreated()
    {
        // Custom logic to execute after the ButtonGroup is created.
        Console.WriteLine("ButtonGroup has been created.");
    }
}

CssClass

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

Declaration
public string CssClass { get; set; }
Property Value
Type Description
System.String

A string representing one or more CSS classes, separated by a space. The default value is string.Empty.
Remarks

Use this property to apply custom CSS classes to the root element of the ButtonGroup, allowing for tailored styling.

Examples

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

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

Mode

Gets or sets the selection mode of the SfButtonGroup.

Declaration
public SelectionMode Mode { get; set; }
Property Value
Type Description
SelectionMode

One of the SelectionMode enumeration values. The default value is Default.
Remarks

The selection mode determines how buttons are selected within the group:

  • Default: No selection is enforced.
  • Single: Allows only one button to be selected at a time, similar to radio buttons.
  • Multiple: Allows multiple buttons to be selected, similar to checkboxes.
Examples

The following example configures the SfButtonGroup for single selection mode.

<SfButtonGroup Mode="SelectionMode.Single">
  <ButtonGroupButton>Option 1</ButtonGroupButton>
  <ButtonGroupButton>Option 2</ButtonGroupButton>
  <ButtonGroupButton>Option 3</ButtonGroupButton>
</SfButtonGroup>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

OnAfterRenderAsync(Boolean)

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
System.Boolean firstRender
Returns
Type
System.Threading.Tasks.Task
Overrides