Blazor Button Group Overview

    The Blazor Button Group component is used to organize IgbToggleButtons into styled button groups with horizontal/vertical alignment, single/multiple selection and toggling.

    Blazor Button Example

    Usage

    Before using the IgbButtonGroup, you need to register it as follows:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbButtonGroupModule));

    You will also need to link an additional CSS file to apply the styling to the IgbButtonGroup component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    For a complete introduction to the Ignite UI for Blazor, read the Getting Started topic.

    Now that you have the Ignite UI for Blazor Button Group imported, you can start with a basic configuration of the IgbButtonGroup and its buttons.

    Use the IgbButtonGroup selector to wrap your IgbToggleButtons and display them into a button group. If you want a button to be selected by default, use the Selected attribute:

    <IgbButtonGroup>
    <IgbToggleButton Value="left">
        <IgbIcon @ref="iconRef" IconName="format_align_left" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="center">
        <IgbIcon IconName="format_align_center" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="right">
        <IgbIcon IconName="format_align_right" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="justify" Selected="true">
        <IgbIcon IconName="format_align_justify" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
</IgbButtonGroup>

    Examples

    Alignment

    Use the Alignment property to set the orientation of the buttons in the button group.

    Selection

    In order to configure the Ignite UI for Blazor IgbButtonGroup selection, you could use its Selection property. This property accepts the following three modes:

    • single - default selection mode of the button group. A single button can be selected/deselected by the user.
    • single-required - mimics a radio group behavior. Only one button can be selected and once initial selection is made, deselection is not possible through user interaction.
    • multiple - multiple buttons in the group can be selected and deselected.

    The sample below demonstrates the exposed IgbButtonGroup selection modes:

    Size

    The --ig-size CSS custom property can be used to control the size of the button group.

    Styling

    The IgbButtonGroup component exposes group CSS part that allows us to style the button group container. Also, the IgbToggleButtons provide toggle CSS part that could be used to style the button element.

    API Reference

    Additional Resources