Skip to main content
All docs
V25.1
  • DevExpress v25.1 Update — Your Feedback Matters

    Our What's New in v25.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

    Take the survey Not interested

    DxButtonGroup Class

    A component that displays a set of buttons.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    #Declaration

    C#
    public class DxButtonGroup :
        DxComponentBase,
        INestedSettingsOwner,
        IDisposable

    #Remarks

    The DevExpress Button Group component for Blazor (<DxButtonGroup>) can display a set of buttons. You can arrange buttons vertically or horizontally, enable selection, and apply predefined styles.

    DxButtonGroup - Overview

    Run Demo: Button Group

    #Add a Button Group to a Project

    Follow the steps below to add a Button Group component to an application:

    1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
    2. Add the following markup to a .razor file: <DxButtonGroup></DxButtonGroup>.
    3. Populate the component with button group items.
    4. Configure the component’s layout and choose an appropriate selection mode.
    5. Customize button appearance at the component level or apply individual customizations.

    #API Reference

    Refer to the following list for the component API reference: DxButtonGroup Members.

    #Static Render Mode Specifics

    Blazor Button Group does not support static render mode. Enable interactivity to use the component in your application. Refer to the following topic for more details: Enable Interactive Render Mode.

    #Item Collection

    Use the Items property to specify a collection of button group items. The DxButtonGroupItem object implements a button group item.

    DxButtonGroup - Items

    Razor
    <DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary">
        <Items>
            <DxButtonGroupItem Text="Add Task" />
            <DxButtonGroupItem Text="Edit Task" />
            <DxButtonGroupItem Text="Assign Task" />
            <DxButtonGroupItem Text="Complete Task" />
            <DxButtonGroupItem Text="Archive Task" />
        </Items>
    </DxButtonGroup>
    

    You can set an item’s DxButtonGroupItem.Visible or DxButtonGroupItem.Enabled property to false to hide or disable a specific item. To hide or disable all items in the component, use the DxButtonGroup.Visible or DxButtonGroup.Enabled property.

    Use the DxButtonGroupItem.NavigateUrl property to specify a URL to which the web browser navigates when the button group item is clicked. To specify where the browser should open the URL (same tab or new tab), use the DxButtonGroupItem.Target property.

    The following code snippet opens the Blazor Documentation item’s NavigateUrl link in the same tab and the Blazor Demos item’s link in a new tab:

    Razor
    <DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary">
        <Items>
            <DxButtonGroupItem Text="Blazor Documentation"
                               NavigateUrl="https://docs.devexpress.com/Blazor/400725/blazor-components"
                               Target="_blank"/>
            <DxButtonGroupItem Text="Blazor Demos"
                               NavigateUrl="https://demos.devexpress.com/blazor/"
                               Target="_blank" />
        </Items>
    </DxButtonGroup>
    

    #Item Arrangement

    The <DxButtonGroup> component arranges its items in a row (the orientation mode is Horizontal). Use the DxButtonGroup.Orientation property to change the mode to Vertical.

    DxButtonGroup - Change Orientation

    <DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary"
                   Orientation="Orientation.Vertical">
        <Items>
            <DxButtonGroupItem Text="Add Task"
                               CssClass="justify-content-start"
                               IconCssClass="icon icon-plus" />
            <DxButtonGroupItem Text="Edit Task"
                               CssClass="justify-content-start"
                               IconCssClass="icon icon-edit" />
            <DxButtonGroupItem Text="Assign Task"
                               CssClass="justify-content-start"
                               IconCssClass="icon icon-user-profile" />
            <DxButtonGroupItem Text="Complete Task"
                               CssClass="justify-content-start"
                               IconCssClass="icon icon-check" />
            <DxButtonGroupItem Text="Archive Task"
                               CssClass="justify-content-start"
                               IconCssClass="icon icon-delete" />
        </Items>
    </DxButtonGroup>
    

    #Item Selection

    The <DxButtonGroup> component supports item selection. Use the DxButtonGroup.SelectionMode property to specify the selection mode. The default mode is None – users cannot select button group items.

    Set the DxButtonGroup.SelectionMode property to Single or Multiple to enable single or multiple item selection. To select specific items in code, set their DxButtonGroupItem.Selected properties to true. To respond to property changes, handle corresponding DxButtonGroupItem.SelectedChanged events.

    The following code snippet sets the component’s selection mode to Single and displays the current selection state of the Admin button group item:

    Razor
    <p>Is item selected - @IsItemSelected</p>
    
    <DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary"
                   RenderStyleMode="ButtonRenderStyleMode.Outline"
                   SelectionMode="ButtonGroupSelectionMode.Single">
        <Items>
            <DxButtonGroupItem Text="Admin"
                               Selected="@IsItemSelected"
                               SelectedChanged="@OnSelectedChanged"/>
            <DxButtonGroupItem Text="Editor" />
            <DxButtonGroupItem Text="Guest" />
        </Items>
    </DxButtonGroup>
    
    @code {
        bool IsItemSelected = false;
    
        void OnSelectedChanged(bool isSelected) {
            IsItemSelected = isSelected;
        }
    }
    

    #Handle Item Clicks

    Use the DxButtonGroup.ItemClick event to specify a common click handler for all button group items. To react to an individual item click, handle the item’s Click event.

    <p>The clicked item is @ClickedItem</p>
    
    <DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary"
                   ItemClick="@OnItemClick" >
        <Items>
            <DxButtonGroupItem Text="Add Task"
                               IconCssClass="icon icon-plus"
                               Click="@OnAddItemClick" />
            <DxButtonGroupItem Text="Edit Task"
                               IconCssClass="icon icon-edit"
                               Click="@OnEditItemClick" />
            <DxButtonGroupItem Text="Assign Task"
                               IconCssClass="icon icon-user-profile" />
            <DxButtonGroupItem Text="Complete Task"
                               IconCssClass="icon icon-check" />
            <DxButtonGroupItem Text="Archive Task"
                               IconCssClass="icon icon-delete" />
        </Items>
    </DxButtonGroup>
    
    @code{
        public string ClickedItem { get; set; } = "";
    
        void OnAddItemClick(MouseEventArgs args) {
            ClickedItem = "Add Task";
        }
        void OnEditItemClick(MouseEventArgs args) {
            ClickedItem = "Edit Task";
        }
    
        async Task OnItemClick(ButtonGroupItemClickEventArgs args) {
            await JSRuntime.InvokeVoidAsync("alert", $"The button group item has been clicked.");
        }
    }
    

    You can also use a button group item to submit a form. To enable form submit, set the DxButtonGroupItem.SubmotFormOnClick property to true.

    #Size Modes

    Use the SizeMode property to specify <DxButtonGroup> component size in code. The following code snippet applies different size modes to Button Group components:

    DxButtonGroup - Size Modes

    Razor
    <DxButtonGroup SizeMode="SizeMode.Small"
                   RenderStyle="ButtonRenderStyle.Secondary">
        <Items>
            <DxButtonGroupItem Text="Admin" />
            <DxButtonGroupItem Text="Editor" />
            <DxButtonGroupItem Text="Guest" />
        </Items>
    </DxButtonGroup>
    <DxButtonGroup SizeMode="SizeMode.Medium"
                   RenderStyle="ButtonRenderStyle.Secondary">
        <Items>
            <DxButtonGroupItem Text="Admin" />
            <DxButtonGroupItem Text="Editor" />
            <DxButtonGroupItem Text="Guest" />
        </Items>
    </DxButtonGroup>
    <DxButtonGroup SizeMode="SizeMode.Large"
                   RenderStyle="ButtonRenderStyle.Secondary">
        <Items>
            <DxButtonGroupItem Text="Admin" />
            <DxButtonGroupItem Text="Editor" />
            <DxButtonGroupItem Text="Guest" />
        </Items>
    </DxButtonGroup>
    

    #Customization

    This section describes how you can customize the <DxButtonGroup> component and its items.

    #Predefined Styles

    The <DxButtonGroup> component allows you to apply predefined styles to all button group items or to an individual item. You can use the following properties:

    DxButtonGroup.RenderStyle | DxButtonGroupItem.RenderStyle
    Specify a button’s predefined style.
    DxButtonGroup.RenderStyleMode | DxButtonGroupItem.RenderStyleMode
    Specify a button’s color filling type.

    Note

    Individual item settings have priority over component settings.

    DxButtonGroup - Apply Predefined Styles

    Razor
    <DxButtonGroup RenderStyleMode="ButtonRenderStyleMode.Outline" SizeMode="SizeMode.Large">
        <Items>
            <DxButtonGroupItem Text="Primary" />
            <DxButtonGroupItem Text="Secondary" RenderStyle="ButtonRenderStyle.Secondary" />
            <DxButtonGroupItem Text="Info" RenderStyle="ButtonRenderStyle.Info" />
            <DxButtonGroupItem Text="Link" RenderStyle="ButtonRenderStyle.Link" />
            <DxButtonGroupItem Text="Success" RenderStyle="ButtonRenderStyle.Success" />
            <DxButtonGroupItem Text="Warning" RenderStyle="ButtonRenderStyle.Warning" />
            <DxButtonGroupItem Text="Danger" RenderStyle="ButtonRenderStyle.Danger" />
        </Items>
    </DxButtonGroup>
    

    #Icons

    You can add icons to button group items. Use the DxButtonGroupItem.IconCssClass property to specify the icon’s CSS class and the DxButtonGroupItem.IconPosition property to position the icon.

    DxButtonGroup - Item Collection

    <DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary">
        <Items>
            <DxButtonGroupItem Text="Add Task"
                               IconCssClass="icon icon-plus" />
            <DxButtonGroupItem Text="Edit Task"
                               IconCssClass="icon icon-edit" />
            <DxButtonGroupItem Text="Assign Task"
                               IconCssClass="icon icon-user-profile" />
            <DxButtonGroupItem Text="Complete Task"
                               IconCssClass="icon icon-check" />
            <DxButtonGroupItem Text="Archive Task"
                               IconCssClass="icon icon-delete" />
        </Items>
    </DxButtonGroup>
    

    #Tooltips

    Use an item’s DxButtonGroupItem.Tooltip property to specify tooltip text.

    DxButtonGroup - Item Tooltips

    Razor
    <DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary">
        <Items>
            <DxButtonGroupItem Text="Blazor Documentation"
                               NavigateUrl="https://docs.devexpress.com/Blazor/400725/blazor-components"
                               Tooltip="This item contains a link" />
            <DxButtonGroupItem Text="Blazor Demos"
                               NavigateUrl="https://demos.devexpress.com/blazor/"
                               Target="_blank"
                               Tooltip="This item contains a link" />
        </Items>
    </DxButtonGroup>
    

    #Keyboard Navigation

    The DevExpress Blazor Button Group component supports keyboard shortcuts that allow users to navigate through button group items, select items, and invoke their click event handlers.

    Note

    Keyboard support allows users who cannot use a mouse or rely on assistive technologies (like screen readers or switch devices) to interact with application content. Refer to the Accessibility help topic for information on other accessibility areas that we address.

    The following shortcut keys are available:

    Shortcut Keys Description
    Tab Moves focus to the next button in the group. From the last button, moves focus to the next page element.
    Shift+Tab Moves focus to the previous button in the group. From the first button, moves focus to the previous page element.
    End Moves focus to the last visible item.
    Home Moves focus to the first visible item.
    Enter, Space Invokes a click event handler for the focused item.
    For Single and Multiple selection modes: selects the focused item.

    #Troubleshooting

    If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.

    #Inheritance

    See Also