LgBanner

LgBanner displays persistent contextual information on the page: functional alert, confirmation, maintenance, connection failure, or global message. Use it when the user must see the information in their reading flow, without opening a temporary notification.

<LgBanner Kind="Kind.Info" IconName="@IconNames.About">
    @("#BannerInformation".Translate())
</LgBanner>

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

Banner content

LgBanner has no Text parameter. Always place the message in ChildContent.

Usage

Demonstration

Try this component in the Lagoon showcase.

Simple information banner

Place the translated text in the child content. Kind controls the visual style and IconName adds a contextual icon.

ConnectionStatusPage.razor

<LgBanner Kind="Kind.Info" IconName="@IconNames.About">
    @("#ConnectionInformation".Translate())
</LgBanner>

Functional variants

Use Kind to distinguish information, success, warning, or error. The variants follow the Bootstrap styles available in Lagoon.

OperationFeedbackPage.razor

<LgBanner Kind="Kind.Success" IconName="@IconNames.All.CheckCircleFill">
    @("#OperationSucceeded".Translate())
</LgBanner>

<LgBanner Kind="Kind.Warning" IconName="@IconNames.All.ExclamationCircleFill">
    @("#PlatformMaintenanceWarning".Translate())
</LgBanner>

<LgBanner Kind="Kind.Error" IconName="@IconNames.All.XCircleFill">
    @("#ConnectionLostError".Translate())
</LgBanner>

Closable banner

Closable displays a close icon. Combine Show and ShowChanged to maintain the display state in the page.

DismissibleBannerPage.razor

<LgBanner Kind="Kind.Warning"
          IconName="@IconNames.All.ExclamationCircleFill"
          Closable="true"
          Show="@IsBannerVisible"
          ShowChanged="OnBannerClosedAsync">
    @("#MaintenanceWarning".Translate())
</LgBanner>

<LgButton Text="#ShowBanner" OnClick="ShowBannerAsync" />

DismissibleBannerPage.razor.cs

public partial class DismissibleBannerPage : LgPage
{
    // Tracks the display state to reopen the banner after user dismissal.
    private bool IsBannerVisible { get; set; } = true;

    // Synchronizes the page-side state when the user clicks the close icon.
    private Task OnBannerClosedAsync()
    {
        IsBannerVisible = false;
        return Task.CompletedTask;
    }

    // Explicitly redisplays the banner from a page action.
    private Task ShowBannerAsync(ActionEventArgs args)
    {
        IsBannerVisible = true;
        return Task.CompletedTask;
    }
}

Additional attributes and CSS classes

Unrecognized attributes are passed to the rendered container. Use CssClass to augment the style and data-* attributes for automated tests.

TrackedBannerPage.razor

<LgBanner Kind="Kind.Primary"
          CssClass="order-banner"
          data-testid="order-banner">
    @("#OrderBannerMessage".Translate())
</LgBanner>

Properties

Name	Type	Default	Declared in	Description
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgBanner	Additional attributes applied to the rendered element.
ChildContent	RenderFragment	null	LgBanner	Content displayed in the banner.
Closable	bool	false	LgBanner	Displays a close action in the banner.
CssClass	string	null	LgBanner	Additional CSS classes applied to the banner.
IconName	string	null	LgBanner	Icon displayed at the beginning of the banner.
Kind	Kind	Kind.Info	LgBanner	Visual style of the banner.
Show	bool	true	LgBanner	Indicates whether the banner is rendered.
ShowChanged	EventCallback	—	LgBanner	Callback invoked when the banner changes display state.

Events

Name	Type	Description
ShowChanged	EventCallback	Triggered when the banner is closed by the user.

Associated enumerations

Kind

Visual style of the component. The default value of LgBanner.Kind is Info.

Value	Description
Primary	Primary style.
Default	Default style.
Secondary	Secondary style.
Success	Success style.
Error	Error style.
Warning	Warning style.
Info	Information style (default value for LgBanner).

Accessibility

• The banner is rendered with role="alert": its content must be short, useful, and understandable out of context.
• Add an icon only if it reinforces the message meaning; text remains mandatory to convey the information.
• For a closable banner, keep an alternative action to redisplay the information if it remains necessary.

Related components

• LgProgress — linear progress bar.
• LgCircleProgress — circular progress.
• LgLoaderView — loading view with fallback content.