OsirionContentNotFound

OsirionContentNotFound renders the body of a not found page: an icon, an error code, a heading, a message and buttons back into the site, with optional suggested links, a search slot and a contact address. With the error code removed, it also works as an empty state for a list or search. The CMS page components show it when their content is missing.

Usage

With no parameters it renders "404", "Page Not Found", a short message and a "Go to Homepage" button:

<OsirionContentNotFound />

A not found page that points readers to likely destinations:

<OsirionContentNotFound Title="This page has moved"
                        Message="We reorganized the docs. One of these pages may have what you need."
                        ShowSuggestions="true"
                        Suggestions="@suggestions"
                        SecondaryButtonText="All docs"
                        SecondaryButtonUrl="/docs"
                        ShowContactInfo="true"
                        ContactEmail="hello@example.org"
                        Variant="centered" />

@code {
    private readonly ContentNotFoundSuggestion[] suggestions =
    [
        new() { Text = "Components", Url = "/docs/components", Description = "Every component, by package." },
        new() { Text = "Blog", Url = "/blog" },
    ];
}

An empty state: clear the error code and the default button, and make it smaller. The title is still an <h1>, so use this where the empty state is the page's main content, such as a blog index with no posts yet:

<OsirionContentNotFound ErrorCode="@null"
                        Title="No posts yet"
                        Message="The first article is on its way."
                        PrimaryButtonText="@null"
                        Variant="minimal"
                        Size="small" />

Parameters

Unmatched attributes are written to the root <div>. A ContentNotFoundSuggestion has Text, Url, an optional Description shown under the link, and Target (default _self).

Behavior

• The component renders plain HTML and needs no script.
• All text is HTML-encoded. Button and suggestion addresses are written as given, so pass addresses you control.
• Title is an <h1>, so use the component as the main content of the page, not inside a page that already has one.
• The buttons take the configured CSS framework's primary and outlined secondary button classes.

Status code

The component renders markup only; it does not set the HTTP status code. Without a 404, search engines can index the page as real content.

On .NET 10, give the router a not found page and use the component there:

<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
    </Found>
</Router>

@page "/not-found"

<PageTitle>Page not found</PageTitle>

<OsirionContentNotFound SecondaryButtonText="All docs" SecondaryButtonUrl="/docs" />

When a page finds that its own content is missing, it calls NavigationManager.NotFound() on .NET 10, or sets Response.StatusCode on the cascading HttpContext during static rendering on .NET 9. The CMS ArticlePage, DocumentPage and HomePage do this themselves.

Styling

The root has osirion-content-not-found, osirion-content-not-found-{Variant} and osirion-content-not-found-{Size}, plus osirion-content-not-found-with-code when there is an error code and osirion-content-not-found-with-background with a pattern.

The full size fills the window below the header, using --osirion-header-height (default 4rem). Inner elements use osirion-content-not-found-code, -title, -message, -suggestions, -search, -custom, -actions and -contact, each prefixed with osirion-content-not-found. Colors and sizes come from the theme tokens (--osirion-text-primary, --osirion-text-secondary, --osirion-action-primary, --osirion-font-size-*).

Related

• Core state components
• Page loading
• Background pattern