LgCopyButton

LgCopyButton is a button that copies a value to the browser's clipboard when clicked. It derives from LgButton and inherits all of its properties.

<LgCopyButton Value="@Model.Reference" />

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

Default values

The constructor predefines the icon (IconNames.All.ClipboardPlus), the tooltip (#lgCopyButtonTooltip), and the click action (copy). After a successful copy, the icon changes to ClipboardCheck. You can override the IconName or Tooltip like on any LgButton.

Usage

Demonstration

Try this component in the Lagoon showcase.

Simple copy

Value is converted to text at the time of the click, then copied to the clipboard. The button inherits the properties of LgButton for style, size, policies, or shortcuts.

ReferencePage.razor

<LgCopyButton Value="@Model.Reference" />

ReferencePage.razor.cs

public partial class ReferencePage : LgPage
{
    // Reference copied as displayed on the screen.
    private ReferenceVm Model { get; } = new() { Reference = "ORD-2025-0001" };

    private sealed class ReferenceVm
    {
        public string Reference { get; set; }
    }
}

Customize the appearance inherited from LgButton

The default icon and tooltip are suitable for common cases, but you can replace them like on a regular LgButton.

ReferenceToolbarPage.razor

<LgCopyButton Value="@Model.Reference"
              Text="#CopyReference"
              Kind="ButtonKind.Secondary"
              ButtonSize="ButtonSize.Small"
              ShortcutKey="c"
              Tooltip="#CopyReferenceTooltip" />

ReferenceToolbarPage.razor.cs

public partial class ReferenceToolbarPage : LgPage
{
    // Business value copied by the shortcut or by the button click.
    private ReferenceVm Model { get; } = new() { Reference = "ORD-2025-0001" };

    private sealed class ReferenceVm
    {
        public string Reference { get; set; }
    }
}

Prepare or cancel the copy with OnCopy

OnCopy is called just before writing to the clipboard. Modify ClipboardTextEventArg.Value to normalize the copied text; assign null to copy nothing.

ReferenceCopyPage.razor

<LgCopyButton Value="@Model.Reference" OnCopy="PrepareCopyAsync" />

ReferenceCopyPage.razor.cs

public partial class ReferenceCopyPage : LgPage
{
    // Source value: it can be cleaned without modifying the displayed model.
    private ReferenceVm Model { get; } = new() { Reference = " ord-2025-0001 " };

    // Intercepts the copy to normalize the reference and prevent an empty copy.
    private Task PrepareCopyAsync(ClipboardTextEventArg arg)
    {
        if (string.IsNullOrWhiteSpace(arg.Value))
        {
            arg.Value = null;
            ShowWarning("#NothingToCopy");
            return Task.CompletedTask;
        }

        arg.Value = arg.Value.Trim().ToUpperInvariant();
        ShowSuccess("#ReferenceCopied");
        return Task.CompletedTask;
    }

    private sealed class ReferenceVm
    {
        public string Reference { get; set; }
    }
}

Copy a calculated value

Value accepts an object. Provide a calculated property when the copied content needs to assemble multiple pieces of information without changing the page display.

ReferenceComputedPage.razor

<LgCopyButton Value="@ClipboardValue"
              Text="#CopyForSupport"
              IconName="@IconNames.All.ClipboardPlus" />

ReferenceComputedPage.razor.cs

public partial class ReferenceComputedPage : LgPage
{
    // Data visible separately on screen, but copied in compact form for support.
    private ReferenceVm Model { get; } = new() { Reference = "ORD-2025-0001", Version = 7 };

    // Calculated value at render: convenient for copying a complete technical reference.
    private string ClipboardValue => $"{Model.Reference};v={Model.Version}";

    private sealed class ReferenceVm
    {
        public string Reference { get; set; }

        public int Version { get; set; }
    }
}

Properties

Own properties

Name	Type	Default	Declared in	Description
Value	object	null	LgCopyButton	Value to save to the clipboard when clicked.
OnCopy	EventCallback<ClipboardTextEventArg>	—	LgCopyButton	Callback triggered when copying; allows reading or modifying the copied value via ClipboardTextEventArg.Value.

Inherited properties

LgCopyButton inherits all of the properties of LgButton (Kind, ButtonSize, Disabled, CssClass, Tooltip, PolicyVisible, etc.).

Events

Event	Type	Description
OnCopy	EventCallback<ClipboardTextEventArg>	Triggered at the time of copying. If ClipboardTextEventArg.Value is null, nothing is copied.

Associated enumerations

These buttons inherit the enumerations from LgButton: ButtonKind, ButtonSize, TooltipPosition.

Related components

• LgPasteButton — paste button from the clipboard.
• LgButton — base button.