FloatingPanel Component

Status states

The live panel (bottom corner, below 1024px) reflects the selected status. Collapse it with the chevron, then drag the FAB to either edge — the side persists across reloads.

Pairing with SectionFooter

On a create/edit page, define the action buttons as one RenderFragment and pass it to both SectionFooter (hidden below the breakpoint) and FloatingPanel (hidden above it). Exactly one action surface is visible at any width.

@{
    RenderFragment formActions = @<text>
        <Button Variant="tertiary" Text="Cancel" OnClick="Cancel" />
        <Button Variant="primary" Text="Save" OnClick="Save" />
    </text>;
}

@* Desktop — docked footer, hidden below lg *@
<div class="max-lg:hidden">
    <SectionFooter Actions="formActions" />
</div>

@* Tablet / phone — floating panel, hidden at lg and up *@
<FloatingPanel Status="_saveStatus"
               Breakpoint="FloatingPanelBreakpoint.BelowLaptop"
               Actions="formActions" />

@code {
    private FloatingPanelStatus _saveStatus = FloatingPanelStatus.Idle;
}