LgBigMessage

LgBigMessage displays a centered information message with an icon, title, description, and optional additional content. It is suitable for full-page states such as a resource not found or access denied.

<LgBigMessage IconName="@IconNames.Error"
              Title="#PageNotFoundTitle"
              Description="#PageNotFoundDescription" />

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

Usage

Demo

Try this component in the Lagoon showcase.

Full-page message

Use Title and Description to provide a short, translated explanation to the user. The icon is provided by IconName.

AccessDeniedPage.razor

<LgBigMessage IconName="@IconNames.Error"
              Title="#AccessDeniedTitle"
              Description="#AccessDeniedDescription" />

Message with action

Add content between the tags to offer a recovery or navigation action.

SearchUnavailablePage.razor

<LgBigMessage IconName="@IconNames.Warning"
              Title="#SearchUnavailableTitle"
              Description="#SearchUnavailableDescription">
    <LgButton Text="#RetrySearch" OnClick="RetrySearchAsync" />
</LgBigMessage>

SearchUnavailablePage.razor.cs

public partial class SearchUnavailablePage : LgPage
{
    // Retry the search after a temporary blocking state signaled by the message.
    private Task RetrySearchAsync(ActionEventArgs args)
    {
        ShowInformation("#SearchRetryStarted");
        return Task.CompletedTask;
    }
}

Properties

Name	Type	Default	Declared in	Description
CssClass	string	null	LgBigMessage	Additional CSS classes added to the message container.
IconName	string	null	LgBigMessage	Name of the icon displayed at the top of the message.
Description	string	null	LgBigMessage	Descriptive text displayed below the title.
Title	string	null	LgBigMessage	Main title of the message.
ChildContent	RenderFragment	null	LgBigMessage	Custom content rendered below the icon, title, and description.

Accessibility

• Use explicit translation keys for Title and Description so the message remains understandable in all application languages.
• Choose an icon consistent with the context, without relying on it alone to convey the message's meaning.
• If ChildContent contains a primary action, give it a clear label with Text="#...".

Related components

• LgEmptyMessage — message for lists or empty areas.
• Toasts — brief feedback triggered from code.