DxButtonGroup Class

A component that displays a set of buttons.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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.

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.

.NET 8 and .NET 9 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 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.

Items with Hyperlinks

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:

<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.

Razor

<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>

CSS

.icon {
    width: 16px;
    height: 16px;
    background-color: currentColor;
    opacity: 0.7;
}
.icon-plus {
    mask-image: url(../images/plus.svg);
}

.icon-edit {
    mask-image: url(../images/edit.svg);
}

.icon-user-profile {
    mask-image: url(../images/user-profile.svg);
}

.icon-check {
    mask-image: url(../images/check.svg);
}

.icon-delete {
    mask-image: url(../images/delete.svg);
}
.justify-content-start {
    justify-content: flex-start !important;
}

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:

<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.

Razor

<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.");
    }
}

CSS

.icon {
    width: 16px;
    height: 16px;
    background-color: currentColor;
    opacity: 0.7;
}
.icon-plus {
    mask-image: url(../images/plus.svg);
}

.icon-edit {
    mask-image: url(../images/edit.svg);
}

.icon-user-profile {
    mask-image: url(../images/user-profile.svg);
}

.icon-check {
    mask-image: url(../images/check.svg);
}

.icon-delete {
    mask-image: url(../images/delete.svg);
}

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 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 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.

Razor

<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>

CSS

.icon {
    width: 16px;
    height: 16px;
    background-color: currentColor;
    opacity: 0.7;
}
.icon-plus {
    mask-image: url(../images/plus.svg);
}

.icon-edit {
    mask-image: url(../images/edit.svg);
}

.icon-user-profile {
    mask-image: url(../images/user-profile.svg);
}

.icon-check {
    mask-image: url(../images/check.svg);
}

.icon-delete {
    mask-image: url(../images/delete.svg);
}

Tooltips

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

<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.

The following shortcut keys are available:

Shortcut Keys	Description
Tab, Shift+Tab	Focuses the Button Group or moves focus to the next or previous focusable page element.
Right Arrow	For Horizontal item orientation: Moves focus to the next visible item. After the last item, moves focus to the first item.
Left Arrow	For Horizontal item orientation: Moves focus to the previous visible item. After the first item, moves focus to the last item.
Down Arrow	For Vertical item orientation: Moves focus to the next visible item. After the last item, moves focus to the first item.
Up Arrow	For Vertical item orientation: Moves focus to the previous visible item. After the first item, moves focus to the last item.
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.

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inheritance

Object

ComponentBase

DxComponentBase

DxButtonGroup