LgToolbarGroup

LgToolbarGroup groups multiple elements of an LgToolbar in a btn-group container. It applies a group style (ToolbarGroupKind) and provides semantic grouping to the buttons it contains.

<LgToolbarGroup>
    <LgToolbarButton Text="Item 1" />
    <LgToolbarButton Text="Item 2" />
</LgToolbarGroup>

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

Inherited style

If Kind is not set, the group inherits GroupKind from the parent LgToolbar.

Usage

Demo

Try this component in the Lagoon showcase.

Group related actions

LgToolbarGroup creates a visual and semantic group (role="group") for buttons that belong to the same functional context.

OrdersPage.razor

@inherits LgPage

<LgToolbar>
    <LgToolbarGroup>
        <LgToolbarButton Text="#Previous" IconName="@IconNames.All.ArrowLeftShort" OnClick="PreviousAsync" />
        <LgToolbarButton Text="#Next" IconName="@IconNames.All.ArrowRightShort" OnClick="NextAsync" />
    </LgToolbarGroup>

    <LgToolbarGroup CssClass="ml-2">
        <LgToolbarButton Text="#Refresh" IconName="@IconNames.All.ArrowRepeat" OnClick="RefreshAsync" />
    </LgToolbarGroup>
</LgToolbar>

OrdersPage.razor.cs

public partial class OrdersPage : LgPage
{
    // Display the previous item in local navigation between records.
    private Task PreviousAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Display the next item without changing the toolbar structure.
    private Task NextAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Reload current content; isolated in a separate group as the action is not navigation.
    private Task RefreshAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }
}

Inherit or override GroupKind

If Kind is not set, the group inherits GroupKind from the parent toolbar. Set Kind locally to highlight a particular group.

OrdersPage.razor

@inherits LgPage

<LgToolbar GroupKind="ToolbarGroupKind.Secondary">
    <LgToolbarGroup>
        <LgToolbarButton Text="#Edit" IconName="@IconNames.Edit" />
        <LgToolbarButton Text="#Duplicate" IconName="@IconNames.All.Files" />
    </LgToolbarGroup>

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

Style source	When to use
LgToolbar.GroupKind	To apply the same style to all groups in a toolbar.
LgToolbarGroup.Kind	To distinguish a group of critical or primary actions.
CssClass	To add spacing or a project class without modifying the Lagoon style.

Place a menu in a group

A group can contain an LgToolbarMenu just like a button. This is the right place for secondary actions related to a primary button.

OrdersPage.razor

@inherits LgPage

<LgToolbar GroupKind="ToolbarGroupKind.Primary">
    <LgToolbarGroup>
        <LgToolbarButton Text="#New" IconName="@IconNames.Add" Kind="ButtonKind.Primary" OnClick="CreateAsync" />
        <LgToolbarMenu Text="#MoreActions" IconName="@IconNames.All.ThreeDotsVertical">
            <LgToolbarButton Text="#Import" IconName="@IconNames.All.Upload" CommandName="import" />
            <LgToolbarButton Text="#Export" IconName="@IconNames.All.Download" CommandName="export" />
        </LgToolbarMenu>
    </LgToolbarGroup>
</LgToolbar>

Consistency

Avoid mixing unrelated business actions in the same LgToolbarGroup. Screen readers announce the group, but accessible labels are still carried by the child buttons and menus.

Properties

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

Name	Type	Default	Declared in	Description
ChildContent	RenderFragment	null	LgToolbarGroup	Toolbar group content.
CssClass	string	null	LgToolbarGroup	Additional CSS classes added to the group's root container.
Kind	ToolbarGroupKind?	Toolbar.GroupKind	LgToolbarGroup	Group style. If the parameter is omitted, OnInitialized inherits GroupKind from the parent toolbar.

Cascading parameters

LgToolbarGroup consumes Toolbar (LgToolbar) to retrieve the default GroupKind value. It also provides its own cascading instance to its children.

Events

No public EventCallback is defined by LgToolbarGroup or its base class.

Associated enumerations

ToolbarGroupKind

Visual style of the button group.

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="group".
• Group only related actions so the structure is consistent for assistive technologies.
• Accessible labels are still carried by the child buttons or menus.

Related components

• LgToolbar — parent container of the toolbar.
• LgToolbarButton — button to place in a group.
• LgToolbarMenu — menu to place in a group.
• LgCrudToolbarButton — menu button with secondary CRUD actions.