Basic Anchored Overlay

<PrimerButton Variant="ButtonVariant.Default"
                Size="ButtonSize.Small"
                TrailingIcon="IconName.TriangleDown16"
                @onclick="ToggleBasic"
                OnElementReferenceCaptured="OnBasicRefCaptured">
    Open Overlay
</PrimerButton>

<PrimerAnchoredOverlay WrapperRef="@BasicTriggerRef"
                        OnClose="@(() => isBasicOpen = false)"
                        IsOpen="@isBasicOpen">
                        <OverlayContent>
    <PrimerBrandBox Padding="BrandBoxPadding.Padding16">
        <PrimerTab OnTabSelected="OnTabSelected" Selected="members">
            <PrimerTabItem Label="Members" Value="members" Counter="0" />
            <PrimerTabItem Label="Settings" Value="settings" />
        </PrimerTab>
        <PrimerBlankslate Border="BlankslateBorder.Enabled" Padding="BlankslatePadding.Spacious">
            <PrimerBlankslateVisual>
                <PrimerIcon Icon="IconName.People16" Size="IconSize.Large" />
            </PrimerBlankslateVisual>
            <PrimerBlankslateHeading HeadingSize="BlankslateHeadingSize.H3">
                No Team Members
            </PrimerBlankslateHeading>
            <PrimerBlankslateDescription>
                Add users to manage your project collaboratively.
            </PrimerBlankslateDescription>
            <PrimerBlankslatePrimaryAction Href="javascript:void(0);">
                Invite Member
            </PrimerBlankslatePrimaryAction>
            <PrimerBlankslateSecondaryAction Href="javascript:void(0);">
                Learn More
            </PrimerBlankslateSecondaryAction>
        </PrimerBlankslate>
    </PrimerBrandBox>
    </OverlayContent>
</PrimerAnchoredOverlay>

Overlay Options

Available parameters for PrimerAnchoredOverlay

NameDescriptionDefault Value
Visible
Controls whether the overlay is shown or hidden.
false
TriggerRef
Element to which the overlay is anchored.
-
OnClose
Callback invoked when overlay should close (e.g. outside click).
-
ChildContent
Content to render inside the overlay.
-
private bool isBasicOpen = false;
private bool isFilterOpen = false;

private ElementReference BasicTriggerRef;
private ElementReference FilterTriggerRef;

private void ToggleBasic() => isBasicOpen = !isBasicOpen;
private void ToggleFilter() => isFilterOpen = !isFilterOpen;

private void OnBasicRefCaptured(ElementReference elementRef) => BasicTriggerRef = elementRef;
private void OnFilterRefCaptured(ElementReference elementRef) => FilterTriggerRef = elementRef;

void OnTabSelected(string selectedTab)
{
    Console.WriteLine($"Selected tab: {selectedTab}");
}