public interface IButtonGroupItemInfo

<div class="my-padding">
    @if (ClickedItem != null) {
        <span>Clicked item: <b>@ClickedItem</b></span>
    } else {
        <span>Clicked item: None</span>
    }
</div>
<div class="my-padding">
    <DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary"
                   ItemClick="@OnItemClick">
        <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>
</div>

@code {
    string ClickedItem { get; set; } = "";
    void OnItemClick(ButtonGroupItemClickEventArgs args) {
        ClickedItem = args.ItemInfo.Text;
    }
}

.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);
}
.my-padding {
    padding-bottom: 25px;
}