LgCrudToolbarButton

LgCrudToolbarButton specializes LgToolbarButton for toolbar menus that need to offer secondary actions such as rename, save, and delete to the right of the main entry.

<LgCrudToolbarButton Text="Profil"
                     OnRename="OnRenameAsync"
                     OnSave="OnSaveAsync"
                     OnRemove="OnRemoveAsync" />

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

Specialized rendering

Secondary buttons (OnRename, OnSave, OnRemove) are rendered only when the component is placed in a LgToolbarMenu and the corresponding callback has a handler.

Usage

Demo

Try this component in the Lagoon showcase.

CRUD entry in a menu

LgCrudToolbarButton is intended to be placed in a LgToolbarMenu. The main entry remains clickable, and secondary buttons are displayed to the right only for the provided callbacks.

ProfilesPage.razor

@inherits LgPage

<LgToolbar>
    <LgToolbarGroup>
        <LgToolbarMenu Text="#Profiles" IconName="@IconNames.All.PersonLinesFill">
            <LgCrudToolbarButton Text="#DefaultProfile"
                                 IconName="@IconNames.All.Person"
                                 OnClick="OpenProfileAsync"
                                 OnRename="RenameProfileAsync"
                                 RenameButtonTooltip="#Rename"
                                 RenameButtonAria="#RenameProfile"
                                 OnSave="SaveProfileAsync"
                                 OnSaveConfirmationMessage="#ConfirmSaveProfile"
                                 SaveButtonTooltip="#Save"
                                 SaveButtonAria="#SaveProfile"
                                 OnRemove="RemoveProfileAsync"
                                 OnRemoveConfirmationMessage="#ConfirmDeleteProfile"
                                 RemoveButtonTooltip="#Delete"
                                 RemoveButtonAria="#DeleteProfile" />
        </LgToolbarMenu>
    </LgToolbarGroup>
</LgToolbar>

ProfilesPage.razor.cs

public partial class ProfilesPage : LgPage
{
    // Opens the main menu entry to view the selected profile.
    private Task OpenProfileAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Starts renaming; the secondary button is rendered only if this callback is defined.
    private Task RenameProfileAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Saves the profile after confirmation to avoid unintentional writing.
    private Task SaveProfileAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Removes the profile after confirmation; the action is separate from the main opening.
    private Task RemoveProfileAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }
}

Display only available actions

Each secondary button is conditioned by its EventCallback. You can therefore expose only the actions allowed by the business context.

ProfilesPage.razor

@inherits LgPage

<LgToolbarMenu Text="#Profiles">
    <LgCrudToolbarButton Text="#ReadOnlyProfile"
                         IconName="@IconNames.All.Eye"
                         OnClick="OpenProfileAsync" />

    <LgCrudToolbarButton Text="#EditableProfile"
                         IconName="@IconNames.Edit"
                         OnClick="OpenProfileAsync"
                         OnRename="RenameProfileAsync"
                         RenameButtonTooltip="#Rename"
                         RenameButtonAria="#RenameProfile"
                         OnSave="SaveProfileAsync"
                         SaveButtonTooltip="#Save"
                         SaveButtonAria="#SaveProfile" />
</LgToolbarMenu>

Rendering outside a menu

If LgCrudToolbarButton is placed directly in a toolbar, it falls back to LgToolbarButton rendering and does not display secondary actions. Use it in LgToolbarMenu to benefit from the CRUD actions column.

Combine main action and command

The main action inherits the capabilities of LgToolbarButton: OnClick, CommandName, CommandArgument, Uri, and Link. Secondary actions remain independent.

ProfilesPage.razor

@inherits LgPage

<LgToolbar OnCommand="OnToolbarCommandAsync">
    <LgToolbarGroup>
        <LgToolbarMenu Text="#Profiles">
            <LgCrudToolbarButton Text="#CurrentProfile"
                                 CommandName="open-profile"
                                 CommandArgument="@_profileId"
                                 OnRemove="RemoveProfileAsync"
                                 OnRemoveConfirmationMessage="#ConfirmDeleteProfile"
                                 RemoveButtonTooltip="#Delete"
                                 RemoveButtonAria="#DeleteProfile" />
        </LgToolbarMenu>
    </LgToolbarGroup>
</LgToolbar>

ProfilesPage.razor.cs

public partial class ProfilesPage : LgPage
{
    // Identifier of the selected profile, passed by the main entry via CommandArgument.
    private int _profileId = 12;

    // Centralizes profile opening without impacting CRUD secondary buttons.
    private Task OnToolbarCommandAsync(CommandEventArgs args)
    {
        if (args.CommandName == "open-profile")
        {
            args.Handled = true;
            App.NavigateTo(ProfilePage.Link((int)args.CommandArgument).Uri);
        }
        return Task.CompletedTask;
    }
}

Properties

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

Name	Type	Default	Declared in	Description
OnRemove	EventCallback<ActionEventArgs>	—	LgCrudToolbarButton	Callback of the delete secondary button. The button is rendered only if this callback has a handler.
OnRemoveConfirmationMessage	string	null	LgCrudToolbarButton	Confirmation message displayed before the OnRemove action.
OnRename	EventCallback<ActionEventArgs>	—	LgCrudToolbarButton	Callback of the rename secondary button. The button is rendered only if this callback has a handler.
OnSave	EventCallback<ActionEventArgs>	—	LgCrudToolbarButton	Callback of the save secondary button. The button is rendered only if this callback has a handler.
OnSaveConfirmationMessage	string	null	LgCrudToolbarButton	Confirmation message displayed before the OnSave action.
RemoveButtonAria	string	null	LgCrudToolbarButton	ARIA label of the delete secondary button.
RemoveButtonTooltip	string	null	LgCrudToolbarButton	Tooltip of the delete secondary button.
RenameButtonAria	string	null	LgCrudToolbarButton	ARIA label of the rename secondary button.
RenameButtonTooltip	string	null	LgCrudToolbarButton	Tooltip of the rename secondary button.
SaveButtonAria	string	null	LgCrudToolbarButton	ARIA label of the save secondary button.
SaveButtonTooltip	string	null	LgCrudToolbarButton	Tooltip of the save secondary button.
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgButton	Additional HTML attributes applied to the rendered main element.
AutoFocus	bool	false	LgButton	Gives focus to the main button on first render.
ButtonSize	ButtonSize?	Toolbar.ButtonSize or ButtonSize.Medium	LgButton	Size of the main button. LgToolbarButton.OnInitialized takes the size of the parent toolbar, otherwise Medium.
ChildContent	RenderFragment	null	LgButton	Custom content of the main button.
CommandArgument	object	null	LgButton	Argument associated with the main command sent to the handler.
CommandName	string	null	LgButton	Name of the main command sent to the parent command handler (ICommandListener).
ConfirmationMessage	string	null	LgButton	Confirmation message displayed before the main action. Incompatible with CommandName and IsSubmit.
CssClass	string	null	LgButton	Additional CSS classes added to the main entry.
Disabled	bool	false	LgButton	Disables the main entry.
IconName	string	null	LgButton	Icon of the main entry.
IsSubmit	bool	false	LgButton	If true, the main button is of type submit and triggers the parent LgEditForm.
Kind	ButtonKind	Toolbar.ButtonKind or ButtonKind.Secondary	LgButton	Style of the main entry. The default behavior is that of LgToolbarButton.
Link	LgPageLink	null	LgButton	Link information to a page. The Text and IconName of the link are taken if they are not defined.
OnClick	EventCallback<ActionEventArgs>	—	LgButton	Callback triggered when clicking on the main entry.
PolicyEdit	string	null	LgButton	Policy required to enable (edit) the main entry.
PolicyVisible	string	null	LgButton	Policy required to display the main entry.
PreventDefault	bool	false	LgButton	Cancels the default behavior of the click event. In a menu, rendering forces true for the main entry.
PreventDoubleClick	bool	true	LgButton	Disables the button during execution of the main action to prevent double-click.
ShortcutKey	string	null	LgButton	Keyboard shortcut character for the main action. Associated with Ctrl, or with Alt if prefixed by @.
StopPropagation	bool	true	LgButton	Stops the propagation of the click event of the main action. In a menu, 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 main entry.
Tooltip	string	null	LgButton	Tooltip of the main entry.
TooltipIsHtml	bool	false	LgButton	Indicates whether the content of the Tooltip is in HTML format (otherwise plain text).
TooltipPosition	TooltipPosition	TooltipPosition	TooltipPosition.Bottom	LgButton
Uri	string	null	LgButton	URI / route to open when clicking on the main entry.
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute of the main entry.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute of the main entry.

Cascading parameters

LgCrudToolbarButton inherits cascading parameters from LgToolbarButton: Toolbar (LgToolbar), ToolbarMenuParent (LgToolbarMenu), as well as cascading parameters inherited from LgButton (ParentAuthorizeView, EditForm, ButtonSizeCascading, ParentCommandListener).

Events

Event	Type	Description
OnClick	EventCallback<ActionEventArgs>	Main action inherited from LgButton.
OnRename	EventCallback<ActionEventArgs>	Action of the rename secondary button.
OnSave	EventCallback<ActionEventArgs>	Action of the save secondary button.
OnRemove	EventCallback<ActionEventArgs>	Action of the delete secondary button.

Related enumerations

ButtonKind

Visual style of the main entry.

Value	Description
Primary	Primary style.
Secondary	Secondary style (default value outside custom toolbar).
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 imposed).

ButtonSize

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

TooltipPosition

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

Accessibility

• Fill in SaveButtonAria, RemoveButtonAria, and RenameButtonAria when secondary buttons are displayed.
• The main entry retains role="menuitem" when it is in a menu.
• Secondary buttons use icons (PencilFill, Save2Fill, IconNames.Delete); their tooltips and ARIA labels must therefore be explicit.

Related components

• LgToolbar — parent container of the toolbar.
• LgToolbarButton — direct base class.
• LgToolbarMenu — rendering context intended for secondary actions.
• LgToolbarGroup — button group.
• LgButton — base button.