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
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
SfBaseComponent
SfButtonGroup
Implements
Inherited Members
Namespace: Syncfusion.Blazor.SplitButtons
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfButtonGroup : SfBaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
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
[Parameter]
public EventCallback<object> Created { get; set; }
Property Value
Type Description
EventCallback<object>

An EventCallback<TValue> of type 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
[Parameter]
public string CssClass { get; set; }
Property Value
Type Description
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
[Parameter]
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
RenderTreeBuilder __builder
Overrides

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered.

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
bool firstRender

Set to true for the first time component rendering; otherwise gets false.
Returns
Type Description
Task

A System.Threading.Tasks.Task representing any asynchronous operation.
Overrides

Implements