LgToolbarButton

LgToolbarButton is the variant of LgButton adapted to Lagoon toolbars. Placed directly in a toolbar, it renders as a button; placed in an LgToolbarMenu, it renders as a menu item.

<LgToolbarButton Text="Item 1" IconName="@IconNames.All.GearFill" />

Namespace: Lagoon.UI.Components
Inherits from: LgButton → LgAriaComponentBase → LgComponentBase
Interfaces: ILgComponentPolicies, IActionComponent, ILgFocusableComponent
NuGet package: Lagoon.UI

Behavior in a menu

When the button is placed in LgToolbarMenu, the rendered output becomes a menu link (role="menuitem") and the click attributes are forced with preventDefault and stopPropagation.

Usage

Demo

Try this component in the Lagoon showcase.

Placed in an LgToolbarGroup, LgToolbarButton behaves as an LgButton adapted to the toolbar. It picks up the default size and style from the parent LgToolbar, unless ButtonSize or Kind are set on the button.

OrdersPage.razor
@inherits LgPage

<LgToolbar ButtonKind="ButtonKind.Secondary" ButtonSize="ButtonSize.Small">
    <LgToolbarGroup>
        <LgToolbarButton Text="#Refresh" IconName="@IconNames.All.ArrowRepeat" OnClick="RefreshAsync" />
        <LgToolbarButton Text="#Save" IconName="@IconNames.Save" Kind="ButtonKind.Primary" OnClick="SaveAsync" />
        <LgToolbarButton Text="#Delete"
                         IconName="@IconNames.Delete"
                         Kind="ButtonKind.Error"
                         ConfirmationMessage="#ConfirmDelete"
                         OnClick="DeleteAsync" />
    </LgToolbarGroup>
</LgToolbar>

OrdersPage.razor.cs
public partial class OrdersPage : LgPage
{
    // Reloads the data from the toolbar without leaving the current page.
    private Task RefreshAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Saves the current item; the primary button forces the primary style here.
    private Task SaveAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Deletes the item after user confirmation to avoid accidental deletions.
    private Task DeleteAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }
}

In an LgToolbarMenu, the same component renders as a menu entry (role="menuitem"). The rendering forces preventDefault and stopPropagation to keep the dropdown list's behavior.

OrdersPage.razor
@inherits LgPage

<LgToolbar>
    <LgToolbarGroup>
        <LgToolbarMenu Text="#MoreActions" IconName="@IconNames.All.GearFill">
            <LgToolbarButton Text="#Duplicate" IconName="@IconNames.All.Files" OnClick="DuplicateAsync" />
            <LgToolbarButton Text="#Archive" IconName="@IconNames.All.Archive" CommandName="archive" />
            <LgToolbarMenuItemSeparator />
            <LgToolbarButton Text="#Delete" IconName="@IconNames.Delete" Kind="ButtonKind.Error" OnClick="DeleteAsync" />
        </LgToolbarMenu>
    </LgToolbarGroup>
</LgToolbar>

Typed navigation with `Link`

Link takes over the URI, title, and icon of an LgPageLink. This is the recommended way to navigate to a Lagoon page without duplicating the route.

OrdersPage.razor
@inherits LgPage

<LgToolbar>
    <LgToolbarGroup>
        <LgToolbarButton Link="@CustomersPage.Link()" />
        <LgToolbarButton Link="@ReportsPage.Link()" Target="_blank" Text="#OpenReportInNewTab" />
    </LgToolbarGroup>
</LgToolbar>

Value priority

If Text or IconName are provided on the button, they replace the values coming from Link. The URI comes from Uri if set, otherwise from Link.Uri.

Use CommandName to avoid declaring a handler on every button. CommandArgument can carry the business identifier or the current filter.

OrdersPage.razor
@inherits LgPage

<LgToolbar OnCommand="OnToolbarCommandAsync">
    <LgToolbarGroup>
        <LgToolbarButton Text="#Open" CommandName="open" CommandArgument="@_selectedOrderId" />
        <LgToolbarButton Text="#Export" CommandName="export" ShortcutKey="e" Tooltip="#ExportShortcut" />
    </LgToolbarGroup>
</LgToolbar>

OrdersPage.razor.cs
public partial class OrdersPage : LgPage
{
    // Identifier of the current row, passed via CommandArgument to the centralized actions.
    private int _selectedOrderId = 42;

    // Processes the commands emitted by the buttons and marks the consumed commands.
    private Task OnToolbarCommandAsync(CommandEventArgs args)
    {
        if (args.CommandName == "open")
        {
            args.Handled = true;
            App.NavigateTo(OrderDetailPage.Link((int)args.CommandArgument).Uri);
        }
        return Task.CompletedTask;
    }
}

Combinations to avoid

As with LgButton, ConfirmationMessage must not be combined with CommandName nor with IsSubmit. For a confirmed action, use OnClick instead.

Properties

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

Name	Type	Default	Declared in	Description
`AdditionalAttributes`	`IReadOnlyDictionary<string, object>`	`null`	`LgButton`	Additional HTML attributes applied to the rendered element (captures unmatched values).
`AutoFocus`	`bool`	`false`	`LgButton`	Gives focus to the button on first render.
`ButtonSize`	`ButtonSize?`	`Toolbar.ButtonSize` or `ButtonSize.Medium`	`LgButton`	Button size. `LgToolbarButton.OnInitialized` picks up the size of the parent toolbar, otherwise `Medium`.
`ChildContent`	`RenderFragment`	`null`	`LgButton`	Custom content of the button.
`CommandArgument`	`object`	`null`	`LgButton`	Argument associated with the command sent to the handler. Use primitive types or `string` to optimize rendering.
`CommandName`	`string`	`null`	`LgButton`	Name of the command sent to the parent command handler (`ICommandListener`).
`ConfirmationMessage`	`string`	`null`	`LgButton`	Confirmation message displayed before the action. Incompatible with `CommandName` and `IsSubmit`.
`CssClass`	`string`	`null`	`LgButton`	Additional CSS classes. In a menu, they are added to the `dropdown-item d-flex` element.
`Disabled`	`bool`	`false`	`LgButton`	Disables the button.
`IconName`	`string`	`null`	`LgButton`	Displayed icon. Used via `IconName="@IconNames.All.MyIcon"`.
`IsSubmit`	`bool`	`false`	`LgButton`	If `true`, the button is of type `submit` and triggers the parent `LgEditForm`.
`Kind`	`ButtonKind`	`Toolbar.ButtonKind` or `ButtonKind.Secondary`	`LgButton`	Button style. The constructor initializes a sentinel value, then `OnInitialized` picks up the toolbar's value or `Secondary`.
`Link`	`LgPageLink`	`null`	`LgButton`	Link information pointing to a page. The link's `Text` and `IconName` are reused if not set.
`OnClick`	`EventCallback<ActionEventArgs>`	—	`LgButton`	Callback triggered when the button is clicked.
`PolicyEdit`	`string`	`null`	`LgButton`	Policy required to enable (edit) the button.
`PolicyVisible`	`string`	`null`	`LgButton`	Policy required to display the button.
`PreventDefault`	`bool`	`false`	`LgButton`	Cancels the default behavior of the click event (`@onclick:preventDefault`). In a menu, the rendering forces `true`.
`PreventDoubleClick`	`bool`	`true`	`LgButton`	Disables the button while the action runs, to prevent double-clicks.
`ShortcutKey`	`string`	`null`	`LgButton`	Keyboard shortcut character. Combined with `Ctrl`, or with `Alt` if prefixed with `@`.
`StopPropagation`	`bool`	`true`	`LgButton`	Stops propagation of the click event (`@onclick:stopPropagation`). In a menu, the rendering forces `true`.
`Target`	`string`	`null`	`LgButton`	Name of the browser window in which to open the `Uri`.
`Text`	`string`	`null`	`LgButton`	Label of the button or menu entry.
`Tooltip`	`string`	`null`	`LgButton`	Tooltip.
`TooltipIsHtml`	`bool`	`false`	`LgButton`	Indicates whether the `Tooltip` content is in HTML format (otherwise plain text).
`TooltipPosition`	`TooltipPosition`	`TooltipPosition.Bottom`	`LgButton`	Tooltip position. The `LgToolbarButton` constructor sets `Bottom`.
`Uri`	`string`	`null`	`LgButton`	URI / route to open on click. In a menu, the `href` attribute is `#` if the URI is empty.
`AriaLabel`	`string`	`null`	`LgAriaComponentBase`	Value of the `aria-label` attribute (translated by `GetTranslatedAriaLabel`).
`AriaLabelledBy`	`string`	`null`	`LgAriaComponentBase`	Value of the `aria-labelledby` attribute.

Cascading parameters

LgToolbarButton consumes Toolbar (LgToolbar) to retrieve default values, ToolbarMenuParent (LgToolbarMenu) to adapt its rendering in a menu, and the cascading parameters inherited from LgButton: ParentAuthorizeView, EditForm, ButtonSizeCascading, and ParentCommandListener.

Events

Event	Type	Description
`OnClick`	`EventCallback<ActionEventArgs>`	Triggered on click (or keyboard shortcut). `ActionEventArgs` notably exposes a `CancellationToken` when the action runs inside a `WaitingContext`.

`ButtonKind`

Visual style of the button.

Value	Description
`Primary`	Primary style.
`Secondary`	Secondary style (default value outside a custom toolbar).
`Success`	"Success" style.
`Error`	"Error" style (danger).
`Warning`	"Warning" style.
`Info`	"Info" style.
`Link`	Link appearance.
`Ghost`	"Ghost" style (transparent background).
`Custom`	Custom style (no variant class imposed).

`ButtonSize`

Value	Description
`Medium`	Standard size (default value outside a custom toolbar).
`Small`	Reduced size.
`Large`	Large size.

`TooltipPosition`

Value	Description
`None`	Undefined position.
`Top`	Above.
`Right`	On the right.
`Bottom`	Below (value set by `LgToolbarButton`).
`Left`	On the left.

Accessibility

In a menu, the component renders role="menuitem" and keeps tabindex="0".
Set AriaLabel or AriaLabelledBy when the button only displays an icon.
Text remains the simplest label to make the action understandable to users and assistive technologies.

LgToolbar — toolbar container.
LgToolbarGroup — button group.
LgToolbarMenu — toolbar dropdown list.
LgCrudToolbarButton — variant with secondary CRUD actions.
LgButton — base button.

Usage​

Demo​

Button in a toolbar​

Button rendered in a menu​

Typed navigation with Link​

Command relayed to the toolbar​

Properties​

Events​

Related enumerations​

ButtonKind​

ButtonSize​

TooltipPosition​

Accessibility​

Related components​

Usage

Demo

Button in a toolbar

Button rendered in a menu

Typed navigation with `Link`

Command relayed to the toolbar

Properties

Events

Related enumerations

`ButtonKind`

`ButtonSize`

`TooltipPosition`

Accessibility

Related components