Banner

Usage

<Banner Status="Status.Warning" Dismissible RememberKey="maintenance-2026-11">
    Scheduled maintenance on Sunday from 02:00 to 04:00 UTC.
    <BannerActions><Anchor Href="/status">Details</Anchor></BannerActions>
</Banner>

A banner is about the whole app or site: planned maintenance, a trial that's ending, an expired license. Put it at the top of the page, or in an AppShell, where it takes a row of its own above the header. For a message about part of a page, use an Alert.

Status and color

Use Status for what the message means, or Accent and Icon for an announcement in your brand's color; Title is a bold lead-in on the same line, and a BannerActions holds a link or button after the text.

<Stack Gap="3" Grow>
    <Banner Title="New:">Dashboards can now be shared with a link.</Banner>
    <Banner Status="Status.Warning">
        Scheduled maintenance on Sunday from 02:00 to 04:00 UTC.
        <BannerActions><Anchor Href="https://status.example.com" External>Details</Anchor></BannerActions>
    </Banner>
    <Banner Status="Status.Danger" Variant="AlertVariant.Solid">Your license has expired. Some features are turned off.</Banner>
    <Banner Accent="Accent.Primary" Variant="AlertVariant.Solid" Icon="Lucide.Sparkles">
        Try the new editor.
        <BannerActions><Anchor Href="docs/components/banner">Turn it on</Anchor></BannerActions>
    </Banner>
</Stack>

With Accent, the status still sets the icon and the word screen readers hear. Variant takes Soft (the default), Outline or Solid, as on Alert.

Dismissing

Use Dismissible for a close button; the banner then stays closed on later pages, remembered in a cookie named by RememberKey.

@inject NavigationManager Navigation

<Stack Gap="3" Grow>
    <Banner @key="Key" Status="Status.Warning" Dismissible RememberKey="@Key">
        Scheduled maintenance on Sunday from 02:00 to 04:00 UTC.
    </Banner>
    <Row>
        <Anchor Href="@Navigation.GetUriWithQueryParameter("notice", Notice + 1)">Show it again</Anchor>
    </Row>
</Stack>

@code {
    // A dismissal is remembered under its key, so a new key shows the banner again.
    [SupplyParameterFromQuery(Name = "notice")]
    private int? NoticeQuery { get; set; }

    private int Notice => NoticeQuery ?? 1;

    private string Key => $"maintenance-{Notice}";
}

The script writes the cookie as the banner closes, and the server reads it and leaves the banner out of every later page, static or interactive. Give a new message a new key to show it to everyone again; without a RememberKey the key comes from the title, text and links, so changing the message does the same. Where the server can't read cookies (WebAssembly), the script hides a remembered banner as the page loads.

How long it stays closed

Use Remember for how long a dismissal lasts: Session (the default) until the browser closes, Persistent for a year, or None for this page only.

@inject NavigationManager Navigation

<Stack Gap="0" Grow>
    @* Closed once, it stays closed for a year on every page, until the key changes. *@
    <Banner @key="Key" Status="Status.Warning" Dismissible Remember="DismissMemory.Persistent" RememberKey="@Key">
        Scheduled maintenance on Sunday from 02:00 to 04:00 UTC. Exports pause during the window.
        <BannerActions><Anchor Href="https://status.example.com" External>Status page</Anchor></BannerActions>
    </Banner>
    <Stack Gap="5" Padding="6">
        <Row Gap="1" Wrap>
            @foreach (var tab in Pages)
            {
                <Button Href="@Navigation.GetUriWithQueryParameter("page", tab.Id)" Size="ControlSize.Sm" Accent="Accent.Neutral"
                        Variant="@(tab.Id == Current.Id ? ButtonVariant.Soft : ButtonVariant.Ghost)"
                        aria-current="@(tab.Id == Current.Id ? "page" : null)">@tab.Title</Button>
            }
        </Row>
        <Stack Gap="2">
            <Heading Level="2" Size="TextSize.Xl">@Current.Title</Heading>
            <TextBlock Color="Color.Muted">@Current.Text</TextBlock>
        </Stack>
        <Divider />
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">
            Notice <Code>@Key</Code> ·
            <Anchor Href="@Navigation.GetUriWithQueryParameter("notice", Notice + 1)">Post a new notice</Anchor>
        </TextBlock>
    </Stack>
</Stack>

@code {
    [SupplyParameterFromQuery(Name = "page")]
    private string? PageId { get; set; }

    [SupplyParameterFromQuery(Name = "notice")]
    private int? NoticeQuery { get; set; }

    private int Notice => NoticeQuery ?? 1;

    // The cookie is ib-banner-{key}: a new key shows the banner to everyone again.
    private string Key => $"maintenance-2026-11-v{Notice}";

    private AppPage Current => Pages.FirstOrDefault(p => p.Id == PageId) ?? Pages[0];

}

The server reads the cookie through AddIzzyBlazor(), from the IzzyBlazor package. On an interactive page, @bind-Dismissed also hears about a dismissal found in the cookie.

In an app

Put it in an AppShell to give it the row above the header, and use Position="BarPosition.Sticky" to keep it in view as the page scrolls.

<AppShell>
    <Banner Status="Status.Warning" Position="BarPosition.Sticky" Dismissible
            RememberKey="maintenance-2026-11">
        Scheduled maintenance on Sunday from 02:00 to 04:00 UTC.
    </Banner>
    <AppHeader>…</AppHeader>
    <AppSidebar>…</AppSidebar>
    <AppMain>@Body</AppMain>
</AppShell>

A sticky banner pushes the sticky header and sidebar down by its height, measured by the script when the message wraps to a second line; with JavaScript off it keeps one line of room.

Shown after the page loads

Use Announce for a banner that appears in response to something, such as a lost connection on an interactive page, so screen readers read it out; one that's there when the page loads is found as a labeled region instead.

@if (_offline)
{
    <Banner Status="Status.Danger" Announce>
        You're offline. Changes are saved when the connection comes back.
    </Banner>
}

Its own words

Use Label for the region's name ("Announcement"), StatusLabel for the word read before the message, and DismissLabel for the close button's name ("Dismiss"), or set them for the whole app as in Text and other languages.

Parts

Written inside Banner. The API page lists their parameters.

• BannerActions: links or buttons after a Banner's message, such as "Details".

Mode support

Accessibility

Parameters

See also

• Alert: a status message about part of a page.
• ToastRegion: toasts from any render mode, even across a redirect.
• AppShell: header, sidebar, main area, aside and footer, arranged by CSS.
• Demos: Banner that stays dismissed.