LgToolbar

LgToolbar is the Lagoon toolbar container. It organizes buttons, groups, and menus, broadcasts its default values to its children, and can centralize commands issued by action components.

<LgToolbar>
    <LgToolbarGroup>
        <LgToolbarButton Text="Action" />
    </LgToolbarGroup>
</LgToolbar>

• Namespace: Lagoon.UI.Components
• Inherits from: LgComponentBase
• Interfaces: ICommandListener
• NuGet package: Lagoon.UI

Broadcast values

ButtonKind, ButtonSize, and GroupKind serve as default values for components placed in the toolbar, including LgToolbarButton and LgToolbarGroup.

Usage

Demonstration

Try this component in the Lagoon showcase.

Compose a complete toolbar

A toolbar can directly contain buttons, groups, and menus. The menu accepts only one level of submenu: place LgToolbarButton, separators, and section titles in it, but not another LgToolbarMenu.

OrdersPage.razor

@inherits LgPage

<LgToolbar CssClass="mb-3">
    <LgToolbarGroup>
        <LgToolbarButton Text="#Refresh" IconName="@IconNames.All.ArrowRepeat" OnClick="RefreshAsync" />
        <LgToolbarButton Text="#Export" IconName="@IconNames.All.Download" CommandName="export" />
    </LgToolbarGroup>

    <LgToolbarGroup>
        <LgToolbarMenu Text="#MoreActions" IconName="@IconNames.All.GearFill">
            <LgToolbarMenuItemTitle Text="#Navigation" />
            <LgToolbarButton Link="@DashboardPage.Link()" />
            <LgToolbarButton Link="@ReportsPage.Link()" />
            <LgToolbarMenuItemSeparator />
            <LgToolbarButton Text="#Archive" IconName="@IconNames.All.Archive" CommandName="archive" />
        </LgToolbarMenu>
    </LgToolbarGroup>

    <LgToolbarButton Text="#Help" IconName="@IconNames.All.QuestionCircle" Uri="help/orders" />
</LgToolbar>

Organization

Group related actions in an LgToolbarGroup to get a consistent btn-group rendering. Buttons or menus placed directly in LgToolbar remain possible for isolated actions.

Broadcast styles to children

ButtonKind, ButtonSize, and GroupKind defined on LgToolbar serve as default values. However, each child can override them locally.

OrdersPage.razor

@inherits LgPage

<LgToolbar ButtonKind="ButtonKind.Ghost"
           ButtonSize="ButtonSize.Small"
           GroupKind="ToolbarGroupKind.Secondary">
    <LgToolbarGroup>
        <LgToolbarButton Text="#Edit" IconName="@IconNames.Edit" />
        <LgToolbarButton Text="#Delete" IconName="@IconNames.Delete" Kind="ButtonKind.Error" />
    </LgToolbarGroup>

    <LgToolbarGroup Kind="ToolbarGroupKind.Primary" CssClass="ml-2">
        <LgToolbarButton Text="#Save" IconName="@IconNames.Save" Kind="ButtonKind.Primary" />
    </LgToolbarGroup>
</LgToolbar>

Value defined on LgToolbar	Inherited by default by	Local override
ButtonKind	LgToolbarButton	Kind on the button.
ButtonSize	LgToolbarButton and LgToolbarMenu open button	ButtonSize on the button.
GroupKind	LgToolbarGroup	Kind on the group.

Centralize commands

OnCommand allows you to handle buttons that declare CommandName in one place. If args.Handled remains false, the command can propagate to a parent ICommandListener.

OrdersPage.razor

@inherits LgPage

<LgToolbar OnCommand="OnToolbarCommandAsync">
    <LgToolbarGroup>
        <LgToolbarButton Text="#Refresh" IconName="@IconNames.All.ArrowRepeat" CommandName="refresh" />
        <LgToolbarButton Text="#Export" IconName="@IconNames.All.Download" CommandName="export" CommandArgument="@_currentFilter" />
    </LgToolbarGroup>
</LgToolbar>

OrdersPage.razor.cs

public partial class OrdersPage : LgPage
{
    // Current filter passed to commands to export or refresh the same view as the one displayed.
    private string _currentFilter = "open";

    // Single entry point for toolbar commands; useful to avoid one handler per button.
    private async Task OnToolbarCommandAsync(CommandEventArgs args)
    {
        try
        {
            if (args.CommandName == "refresh")
            {
                args.Handled = true;
                await RefreshAsync(args.CancellationToken);
            }
            else if (args.CommandName == "export")
            {
                args.Handled = true;
                await ExportAsync((string)args.CommandArgument, args.CancellationToken);
            }
        }
        catch (Exception ex)
        {
            ShowException(ex);
        }
    }

    // Reloads the data displayed by the page by reusing the action's cancellation token.
    private Task RefreshAsync(CancellationToken cancellationToken)
    {
        return Task.CompletedTask;
    }

    // Launches the export corresponding to the active filter to preserve the user context.
    private Task ExportAsync(string filter, CancellationToken cancellationToken)
    {
        return Task.CompletedTask;
    }
}

Properties

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

Name	Type	Default	Declared in	Description
ButtonKind	ButtonKind?	null	LgToolbar	Default style applied to toolbar buttons that do not define their own Kind.
ButtonSize	ButtonSize?	App.BehaviorConfiguration.ToolbarButtonSize	LgToolbar	Default size of toolbar buttons. If the parameter is omitted, OnInitialized uses the application configuration.
ChildContent	RenderFragment	null	LgToolbar	Content of the toolbar.
CssClass	string	null	LgToolbar	Additional CSS classes added to the root container.
GroupKind	ToolbarGroupKind	0 (no named value)	LgToolbar	Default style applied to groups that do not define their own Kind.
OnCommand	EventCallback<CommandEventArgs>	—	LgToolbar	Callback called when a command propagates from a child component.

Cascading parameters

LgToolbar consumes ParentCommandListener (ICommandListener) to propagate unhandled commands to a parent. It also provides its own instance in cascade to its children (LgToolbarGroup, LgToolbarButton, LgToolbarMenu).

Events

Event	Type	Description
OnCommand	EventCallback<CommandEventArgs>	Triggered when a child emits a command via CommandName. CommandEventArgs exposes CommandName, CommandArgument, CancellationToken, and Handled.

Associated enumerations

ButtonKind

Visual style passed to toolbar buttons when they do not have an explicit Kind.

Value	Description
Primary	Primary style.
Secondary	Secondary style.
Success	Success style.
Error	Error style (danger).
Warning	Warning style.
Info	Information style.
Link	Link appearance.
Ghost	Ghost style (transparent background).
Custom	Custom style (no variant class enforced).

ButtonSize

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

ToolbarGroupKind

Visual style passed to button groups.

Value	Description
Primary	Primary style.
Secondary	Secondary style.
Success	Success style.
Error	Error style (danger).
Warning	Warning style.
Info	Information style.
Ghost	Ghost style.

Accessibility

• The root container is rendered with role="menubar".
• Place actions in child components that expose their labels (Text) or ARIA attributes.
• Use OnCommand to centralize actions without duplicating handlers in each button.

Related components

• LgToolbarButton — toolbar button.
• LgToolbarGroup — group of buttons in a toolbar.
• LgToolbarMenu — dropdown menu of toolbar.
• LgCrudToolbarButton — menu button with secondary CRUD actions.