LgEmptyMessage

LgEmptyMessage displays an empty state when an area contains no data. It presents an icon, a title, and a description in a dedicated block.

<LgEmptyMessage IconName="@IconNames.Empty"
                Title="#EmptyOrdersTitle"
                Description="#EmptyOrdersDescription" />

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

Usage

Demonstration

Try this component in the Lagoon showcase.

List with no results

Display the component when the collection is empty. The component does not declare a Show parameter: the display condition is handled by the page.

OrderListPage.razor

@if (!HasOrders)
{
    <LgEmptyMessage IconName="@IconNames.Empty"
                    Title="#NoOrderTitle"
                    Description="#NoOrderDescription" />
}

OrderListPage.razor.cs

public partial class OrderListPage : LgPage
{
    // Indicates whether the list contains at least one element to display.
    private bool HasOrders => Orders.Count > 0;

    // Sample data used by the empty state condition.
    private List<OrderVm> Orders { get; } = new();

    private sealed class OrderVm
    { }
}

Custom empty state with CSS

Add CssClass to target a style specific to the functional area.

DocumentListPage.razor

<LgEmptyMessage CssClass="documents-empty-state"
                IconName="@IconNames.Empty"
                Title="#NoDocumentTitle"
                Description="#NoDocumentDescription" />

Properties

Name	Type	Default	Declared in	Description
CssClass	string	null	LgEmptyMessage	Additional CSS classes added to the message container.
IconName	string	null	LgEmptyMessage	Name of the icon displayed in the empty state.
Description	string	null	LgEmptyMessage	Descriptive text displayed below the title when not empty after translation.
Title	string	null	LgEmptyMessage	Title displayed when not empty after translation.

Accessibility

• Prefer a short title that clearly announces the absence of data.
• Use the description to suggest the next step, for example launching a search or creating an item.
• Do not use the icon as the only information: the title and description must convey the meaning.

Related components

• LgBigMessage — full-page message or blocking state.
• Toasts — brief notifications triggered from code.