LgActionPanel

LgActionPanel displays a horizontal area combining main action content on the left and a toolbar on the right. It wraps the Toolbar content in an LgToolbar configured with Ghost style, and allows harmonizing the size of action buttons.

<LgActionPanel>
    <ActionContent>
        <LgLabel Text="#lblPnlActionCustomTxt" />
    </ActionContent>
    <Toolbar>
        <LgToolbarButton IconName="@IconNames.Save" Text="#lblSave" />
    </Toolbar>
</LgActionPanel>

• Namespace: Lagoon.UI.Components
• Inherits from: LgAriaComponentBase → LgComponentBase
• Interfaces: —
• NuGet package: Lagoon.UI

Integrated toolbar

The Toolbar fragment is rendered inside an internal LgToolbar with GroupKind="ToolbarGroupKind.Ghost" and ButtonKind="ButtonKind.Ghost". On load, the internal size is initialized from the application configuration ActionPanelToolbarButtonSize only when ToolbarButtonSize is null.

Usage

Demo

Try this component in the Lagoon showcase.

Panel with label and buttons

Place informational content in ActionContent (on the left) and actions in Toolbar (on the right). The Toolbar fragment is rendered inside an internal toolbar: use LgToolbarGroup and LgToolbarButton to preserve Lagoon styles.

SelectionActionPage.razor

<LgActionPanel CssClass="list-view-selectionbar" ToolbarButtonSize="ButtonSize.Large">
    <ActionContent>
        <LgLabel CssClass="my-auto" Text="#SelectedItems" />
    </ActionContent>

    <Toolbar>
        <LgToolbarGroup Kind="ToolbarGroupKind.Primary">
            <LgToolbarButton IconName="@IconNames.Save"
                             OnClick="SaveSelectionAsync"
                             Text="#Save"
                             Kind="ButtonKind.Ghost" />
            <LgToolbarButton IconName="@IconNames.Delete"
                             OnClick="DeleteSelectionAsync"
                             Text="#Delete"
                             Kind="ButtonKind.Ghost" />
        </LgToolbarGroup>

        <LgToolbarGroup Kind="ToolbarGroupKind.Ghost">
            <LgToolbarButton IconName="@IconNames.Cancel"
                             OnClick="ClearSelectionAsync"
                             Text="#Cancel"
                             Kind="ButtonKind.Ghost" />
        </LgToolbarGroup>
    </Toolbar>
</LgActionPanel>

SelectionActionPage.razor.cs

public partial class SelectionActionPage : LgPage
{
    // Saves selected items: main action of the selection panel.
    private async Task SaveSelectionAsync(ActionEventArgs args)
    {
        await Task.Delay(100, args.CancellationToken);
        ShowSuccess("#SelectionSaved");
    }

    // Deletes selected items: destructive action grouped with selection actions.
    private async Task DeleteSelectionAsync(ActionEventArgs args)
    {
        await Task.Delay(100, args.CancellationToken);
        ShowSuccess("#SelectionDeleted");
    }

    // Clears the current selection to hide or reset the action bar on the page side.
    private Task ClearSelectionAsync(ActionEventArgs args)
    {
        ShowInformation("#SelectionCleared");
        return Task.CompletedTask;
    }
}

Toolbar button size

ToolbarButtonSize forces the size of buttons in the internal toolbar. Leave the value at null to use the application configuration ActionPanelToolbarButtonSize.

SelectionCompactActionPage.razor

<LgActionPanel ToolbarButtonSize="ButtonSize.Small">
    <ActionContent>
        <LgLabel Text="#SelectionActions" />
    </ActionContent>
    <Toolbar>
        <LgToolbarButton Text="#Save" IconName="@IconNames.Save" OnClick="SaveSelectionAsync" />
        <LgToolbarButton Text="#Delete" IconName="@IconNames.Delete" OnClick="DeleteSelectionAsync" />
    </Toolbar>
</LgActionPanel>

SelectionCompactActionPage.razor.cs

public partial class SelectionCompactActionPage : LgPage
{
    // Handles a compact action when available space requires small buttons.
    private Task SaveSelectionAsync(ActionEventArgs args)
    {
        ShowSuccess("#SelectionSaved");
        return Task.CompletedTask;
    }

    // Deletes from the compact version of the panel, without changing the business behavior.
    private Task DeleteSelectionAsync(ActionEventArgs args)
    {
        ShowSuccess("#SelectionDeleted");
        return Task.CompletedTask;
    }
}

Visual disabled state

Disabled adds the CSS class disabled to the panel container. Buttons placed in Toolbar remain independent components: define their own Disabled if the action must be truly neutralized.

SelectionLockedActionPage.razor

<LgActionPanel Disabled="@IsSelectionLocked">
    <ActionContent>
        <LgLabel Text="#SelectionLocked" />
    </ActionContent>
    <Toolbar>
        <LgToolbarButton Text="#Save"
                         IconName="@IconNames.Save"
                         Disabled="@IsSelectionLocked"
                         OnClick="SaveSelectionAsync" />
    </Toolbar>
</LgActionPanel>

SelectionLockedActionPage.razor.cs

public partial class SelectionLockedActionPage : LgPage
{
    // Locks the selection: the panel and each child action reflect the same business state.
    private bool IsSelectionLocked { get; set; } = true;

    // Executed only when the child button is not disabled.
    private Task SaveSelectionAsync(ActionEventArgs args)
    {
        ShowSuccess("#SelectionSaved");
        return Task.CompletedTask;
    }
}

Integration with a list or grid

The panel is often displayed when a selection exists in a list or grid. LgListView already has its own action panel: do not add a second LgActionPanel inside this component unless you need an explicitly distinct layout.

GridSelectionPage.razor

@if (HasSelection)
{
    <LgActionPanel AriaLabel="#SelectionActions">
        <ActionContent>
            <LgLabel Text="#RowsSelected" />
        </ActionContent>
        <Toolbar>
            <LgToolbarButton Text="#Export" IconName="@IconNames.Export" OnClick="ExportSelectionAsync" />
            <LgToolbarButton Text="#Cancel" IconName="@IconNames.Cancel" OnClick="ClearSelectionAsync" />
        </Toolbar>
    </LgActionPanel>
}

GridSelectionPage.razor.cs

public partial class GridSelectionPage : LgPage
{
    // Indicates whether the panel should be visible: it disappears as soon as the selection is empty.
    private bool HasSelection { get; set; } = true;

    // Exports only selected rows, which justifies the contextual display of the panel.
    private Task ExportSelectionAsync(ActionEventArgs args)
    {
        ShowSuccess("#SelectionExported");
        return Task.CompletedTask;
    }

    // Resets the selection and hides the contextual action panel.
    private Task ClearSelectionAsync(ActionEventArgs args)
    {
        HasSelection = false;
        return Task.CompletedTask;
    }
}

Properties

All [Parameter] properties of the component, including inherited ones.

Name	Type	Default	Declared in	Description
ActionContent	RenderFragment	null	LgActionPanel	Content displayed in the left area of the panel.
CssClass	string	null	LgActionPanel	Additional CSS classes applied to the d-flex action-pnl container.
Disabled	bool	false	LgActionPanel	Adds the CSS class disabled to the panel. Does not automatically disable child actions.
Toolbar	RenderFragment	null	LgActionPanel	Toolbar content, rendered inside an internal LgToolbar.
ToolbarButtonSize	ButtonSize?	null	LgActionPanel	Size of the toolbar buttons. In the current implementation, the internal size is loaded from ActionPanelToolbarButtonSize when this parameter is null.
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute of the group.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute of the group.

Events

LgActionPanel exposes no EventCallback of its own. Events are carried by components placed in ActionContent or Toolbar (for example LgToolbarButton.OnClick).

Associated enumerations

ButtonSize

Value	Description
Medium	Standard size.
Small	Reduced size.
Large	Large size.

Accessibility

• The container is rendered with role="group" and adopts AriaLabel / AriaLabelledBy.
• Provide an accessible label to the panel when the left content does not sufficiently describe the action group.
• Disabled is visual at the panel level: child controls must carry their own disabled state to be correctly announced and neutralized.

Related components

• LgButton — basic action button, also ancestor of LgToolbarButton.
• LgLabelAction — compact alternative for displaying a value with a single action.