Basic Button Group

<PrimerButtonGroup>
    <PrimerButton Size="ButtonSize.Small">One</PrimerButton>
    <PrimerButton Size="ButtonSize.Small">Two</PrimerButton>
</PrimerButtonGroup>

Button Group with Icon Menu

<PrimerButtonGroup>
    <PrimerIconButton Size="ButtonSize.Small" Icon="IconName.Copilot16">
    </PrimerIconButton>
    <PrimerIconButton ClassName="is-last" Icon="IconName.TriangleDown16" OnClick="ToggleMenu" OnElementReferenceCaptured="OnTargetRefCaptured" />
    <PrimerAnchoredOverlay IsOpen="@IsMenuOpen"
                            WrapperRef="@TriggerRef" OnClose="CloseMenu">
        <OverlayContent>
            <PrimerActionList>
                <PrimerActionListItem>
                    <ChildContent>Item One</ChildContent>
                </PrimerActionListItem>
                <PrimerActionListItem>
                    <ChildContent>Item Two</ChildContent>
                </PrimerActionListItem>
            </PrimerActionList>
        </OverlayContent>
    </PrimerAnchoredOverlay>
</PrimerButtonGroup>
           

@code{
    private void CloseMenu() => IsMenuOpen = false;

    private async Task ToggleMenu()
    {
        if (!IsMenuOpen)
        {
            var rect = await JSInterop.GetBoundingClientRect(TriggerRef);
            MenuTop = rect.Bottom + 4;
            MenuLeft = rect.Left;
        }
        IsMenuOpen = !IsMenuOpen;
    }
}

Button Group Options

Available options for PrimerButtonGroup component

NameDescriptionDefault ValueCSS Class
ChildContent
Button components inside the group
-
BtnGroup-item
CascadingValue
Marks buttons inside group
true
-
[Inject]
private Blazor.PrimerUI.PrimerBlazorJsInterop JSInterop { get; set; } = default!;
private bool IsMenuOpen;
private double MenuTop;
private double MenuLeft;
private ElementReference TriggerRef;
private void CloseMenu() => IsMenuOpen = false;

private async Task ToggleMenu()
{
    if (!IsMenuOpen)
    {
        var rect = await JSInterop.GetBoundingClientRect(TriggerRef);
        MenuTop = rect.Bottom + 4;
        MenuLeft = rect.Left;
    }
    IsMenuOpen = !IsMenuOpen;
}

private void OnTargetRefCaptured(ElementReference element)
{
    TriggerRef = element;
}