LgLabelAction

LgLabelAction displays a value (read-only) together with a label and an action button. It is a lightweight component, useful for presenting information with a contextual action (copy, edit, open…).

<LgLabelAction Label="Référence"
               Value="@Model.Reference"
               ButtonIconName="@IconNames.All.ClipboardPlus"
               OnClick="OnCopyAsync" />

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

Usage

Simple display with action

LgLabelAction is suited to cases where a read-only value must be accompanied by a contextual action. Clicking the button raises an ActionEventArgs, as with LgButton.

CustomerPage.razor

<LgLabelAction Label="#CustomerIdentifier"
               Value="@Model.Identifier"
               ButtonText="#Copy"
               ButtonIconName="@IconNames.All.ClipboardPlus"
               OnClick="CopyIdentifierAsync" />

CustomerPage.razor.cs

public partial class CustomerPage : LgPage
{
    // Data displayed by the label: the action operates on this read-only value.
    private CustomerVm Model { get; } = new() { Identifier = "CUST-00042" };

    // Copies the displayed identifier: useful for quickly reusing a business reference.
    private Task CopyIdentifierAsync(ActionEventArgs args)
    {
        ShowSuccess("#CustomerIdentifierCopied");
        return Task.CompletedTask;
    }

    private sealed class CustomerVm
    {
        public string Identifier { get; set; }
    }
}

Button style and tooltip

The inner button honors ButtonKind, ButtonText, ButtonIconName and Disabled. The tooltip is carried by the label, which helps explain the displayed value.

CustomerStatusPage.razor

<LgLabelAction Label="#CustomerStatus"
               Value="@Model.Status"
               Tooltip="#CustomerStatusTooltip"
               ButtonKind="ButtonKind.Secondary"
               ButtonText="#Edit"
               ButtonIconName="@IconNames.Edit"
               OnClick="EditStatusAsync" />

CustomerStatusPage.razor.cs

public partial class CustomerStatusPage : LgPage
{
    // Current status displayed read-only: the button opens the associated edit action.
    private CustomerVm Model { get; } = new() { Status = "#CustomerStatusActive" };

    // Starts editing the status without turning the label into a permanent input field.
    private Task EditStatusAsync(ActionEventArgs args)
    {
        ShowInformation("#CustomerStatusEditionOpened");
        return Task.CompletedTask;
    }

    private sealed class CustomerVm
    {
        public string Status { get; set; }
    }
}

Multi-line value

MultiLine="true" places the button before the value and displays it across multiple lines. This mode is suited to comments, descriptions, or long messages.

CustomerCommentPage.razor

<LgLabelAction Label="#Comment"
               Value="@Model.Comment"
               MultiLine="true"
               ButtonKind="ButtonKind.Ghost"
               ButtonIconName="@IconNames.Edit"
               OnClick="EditCommentAsync" />

CustomerCommentPage.razor.cs

public partial class CustomerCommentPage : LgPage
{
    // Comment displayed across multiple lines to stay readable without opening a full form.
    private CustomerVm Model { get; } = new() { Comment = "#CustomerCommentPreview" };

    // Opens comment editing only when the user requests the change.
    private Task EditCommentAsync(ActionEventArgs args)
    {
        ShowInformation("#CommentEditionOpened");
        return Task.CompletedTask;
    }

    private sealed class CustomerVm
    {
        public string Comment { get; set; }
    }
}

Disabled action

Disabled disables the action button while keeping the displayed value. Use this mode to signal that information remains viewable but the action is not allowed in the current state.

CustomerLockedPage.razor

<LgLabelAction Label="#CustomerIdentifier"
               Value="@Model.Identifier"
               ButtonText="#Edit"
               ButtonIconName="@IconNames.Edit"
               Disabled="@IsLocked"
               OnClick="EditIdentifierAsync" />

CustomerLockedPage.razor.cs

public partial class CustomerLockedPage : LgPage
{
    // Business lock: the value stays visible, but the contextual action is neutralized.
    private bool IsLocked { get; set; } = true;

    // Data displayed by the label, independent of the button's enabled state.
    private CustomerVm Model { get; } = new() { Identifier = "CUST-00042" };

    // Runs only when the button is not disabled.
    private Task EditIdentifierAsync(ActionEventArgs args)
    {
        ShowInformation("#CustomerIdentifierEditionOpened");
        return Task.CompletedTask;
    }

    private sealed class CustomerVm
    {
        public string Identifier { get; set; }
    }
}

tip

The component always displays a read-only value. Use Disabled to neutralize only the action button when the information remains viewable.

Properties

Name	Type	Default	Declared in	Description
Value	string	null	LgLabelAction	Displayed value.
Label	string	""	LgLabelAction	Label associated with the value.
CssClass	string	null	LgLabelAction	Additional CSS classes.
Tooltip	string	null	LgLabelAction	Tooltip.
TooltipIsHtml	bool	false	LgLabelAction	Indicates whether the Tooltip content is HTML (otherwise plain text).
ButtonKind	ButtonKind	ButtonKind.Primary	LgLabelAction	Style of the action button.
ButtonText	string	""	LgLabelAction	Label of the action button.
ButtonIconName	string	null	LgLabelAction	Icon of the action button (IconNames.All.*).
MultiLine	bool	false	LgLabelAction	Displays the value across multiple lines.
Disabled	bool	false	LgLabelAction	Disables the action button.
OnClick	EventCallback<ActionEventArgs>	—	LgLabelAction	Callback triggered when the action button is clicked.

Events

Event	Type	Description
OnClick	EventCallback<ActionEventArgs>	Triggered when the action button is clicked.

Related enumerations

See ButtonKind on the LgButton page.

Related components

• LgButton — the standalone button.