DxButtonGroupItem Class

Defines a button group item in DxButtonGroup.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.1.dll

Declaration

public class DxButtonGroupItem :
    DxButtonBase,
    IDisposable

Remarks

The DxButtonGroupItem class implements the functionality of an individual item displayed in a DxButtonGroup component. Use the Items property to manage the component’s item collection.

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

Run Demo: Button Group

Item Appearance

Use the following API members to customize the button group item’s appearance:

Text

Specifies the item text.

Tooltip

Specifies the item’s tooltip text.

CssClass

Assigns a CSS class to the item.

IconUrl | IconCssClass | IconPosition

Specify and customize the item’s icon.

The following code snippet assigns icons to DxButtonGroupItem components using Icon Library APIs:

@using DevExpress.Images.Blazor

<DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary">
    <Items>
        <DxButtonGroupItem Text="Add Task"
                           IconUrl="@Icon.AddCircle" />
        <DxButtonGroupItem Text="Edit Task"
                           IconUrl="@Icon.EditPen" />
        <DxButtonGroupItem Text="Assign Task"
                           IconUrl="@Icon.UserAccountCircle" />
        <DxButtonGroupItem Text="Complete Task"
                           IconUrl="@Icon.CheckmarkCircle" />
        <DxButtonGroupItem Text="Archive Task"
                           IconUrl="@Icon.Delete" />
    </Items>
</DxButtonGroup>

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.

<div>
    <div style="padding-bottom:5px;">
        <div><b>Contained Mode:</b></div>
        <DxButtonGroup RenderStyleMode="ButtonRenderStyleMode.Contained">
            <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>
    </div>
    <div style="padding-bottom:5px;">
        <div><b>Outline Mode:</b></div>
        <DxButtonGroup RenderStyleMode="ButtonRenderStyleMode.Outline">
            <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>
    </div>
    <div>
        <div><b>Text Mode:</b></div>
        <DxButtonGroup RenderStyleMode="ButtonRenderStyleMode.Text">
            <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>
    </div>
</div>

Items with Hyperlinks

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

Handle the item’s Click event to react to item clicks. You can also use the DxButtonGroup.ItemClick event to specify a common click handler for all items.

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 the button group item to submit a form. To enable form submit, set the SubmitFormOnClick property to true.

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inheritance

Object

ComponentBase

DxComponentBase

DxButtonBase

DxButtonGroupItem