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

Implements

System.IAsyncDisposable

Inherited Members

SfBaseComponent.DisposeAsync()

Namespace: Syncfusion.Blazor.Toolkit.Buttons

Assembly: Syncfusion.Blazor.Toolkit.dll

Syntax

public class SfButtonGroup : SfBaseComponent, IAsyncDisposable

Remarks

The ButtonGroup can contain Button 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 Button instances.

 
<SfButtonGroup> 
<Button>Left</Button> 
<Button>Center</Button> 
<Button>Right</Button> f
</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">
  <Button>Left</Button>
  <Button>Center</Button>
  <Button>Right</Button>
</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">
  <Button>Left</Button>
  <Button>Center</Button>
  <Button>Right</Button>
</SfButtonGroup>

IsVertical

Gets or sets a value indicating whether the buttons in the SfButtonGroup are arranged vertically.

Declaration

public bool IsVertical { get; set; }

Property Value

Type	Description
System.Boolean	true to arrange buttons vertically; false to arrange them horizontally. The default value is false.

Remarks

When set to true, the CSS class e-vertical is applied to the ButtonGroup container, causing the buttons to be displayed in a vertical layout. When set to false, the e-vertical class is removed, displaying buttons in their default horizontal layout. This property supports dynamic changes and will update the layout immediately when modified.

Examples

The following example demonstrates how to create a vertically oriented SfButtonGroup.

<SfButtonGroup IsVertical="true">
  <Button>Top</Button>
  <Button>Middle</Button>
  <Button>Bottom</Button>
</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 .

Remarks

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

None: 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">
  <Button>Option 1</Button>
  <Button>Option 2</Button>
  <Button>Option 3</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