Feedback & status

AppResult

A full-page or section outcome screen — success confirmations, verifications, and error states.

<app-result status="success" title="Order confirmed" subtitle="Order #12345 will ship tomorrow." />

An outcome screen is the moment after an action completes — a checkout success, a verification done, or an error (403/404/500). Distinct from <app-empty-state> (which is a card/section "nothing here yet"), this is a self-contained result panel with a prominent status, heading, supporting message, and usually one or two actions.

The status attribute picks a default icon and colour. Numeric statuses (403, 404, 500) render the code as a large figure for immediate scannability.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the result above it.

Order confirmed

Order #12345 will ship tomorrow.
<app-result title="Order confirmed" subtitle="Order #12345 will ship tomorrow." />

Status outcomes

The five standard outcomes: success, error, warning, info, and numeric error codes.

Success — order confirmed
A completed action with a next step. Inner content is the action buttons.

Order confirmed

Order #12345 will ship tomorrow.
Show code 
<app-result status="success" title="Order confirmed"
            subtitle="Order #12345 will ship tomorrow.">
    <app-button variant="primary">View order</app-button>
</app-result>
Error — something went wrong
A failed action with guidance or a retry option.

Payment declined

Your card was declined. Please check your details and try again.
Show code 
<app-result status="error" title="Payment declined"
            subtitle="Your card was declined. Please check your details and try again.">
    <app-button variant="primary">Try again</app-button>
</app-result>
404 — page not found
Numeric status codes render as large figures.

Page not found

This page has been moved or no longer exists.
Show code 
<app-result status="404" title="Page not found"
            subtitle="This page has been moved or no longer exists.">
    <app-button variant="primary">Go home</app-button>
</app-result>
Warning — are you sure?
A caution state that still offers a path forward.

High risk detected

This action cannot be undone. Review the details carefully.
Show code 
<app-result status="warning" title="High risk detected"
            subtitle="This action cannot be undone. Review the details carefully.">
    <app-button variant="danger">I understand, proceed</app-button>
    <app-button variant="secondary">Cancel</app-button>
</app-result>
Info — just so you know
A neutral informational state.

Verification in progress

We're checking your details. This usually takes a few minutes.
Show code 
<app-result status="info" title="Verification in progress"
            subtitle="We're checking your details. This usually takes a few minutes." />

Custom icons

Override the status-default icon.

Custom icon
Replace the default with your own glyph.

Milestone reached!

You've completed your first 10 tasks.
Show code 
<app-result status="success" icon="sparkles" title="Milestone reached!"
            subtitle="You've completed your first 10 tasks." />

Extra content

Add detail or guidance below the actions.

With extra copy
A secondary explanation or next step below the actions.

Email verified

Your email address is now confirmed.

A confirmation link has been sent to your inbox for future sign-ins.

Show code 
<app-result status="success" title="Email verified"
            subtitle="Your email address is now confirmed.">
    <app-button variant="primary">Continue to dashboard</app-button>
    <p style="margin-top:16px;">A confirmation link has been sent to your inbox for future sign-ins.</p>
</app-result>

When to use

Use it when

  • A self-contained outcome screen after a major action completes (checkout, signup, verification).
  • An error state (403/404/500) needs a prominent, scannable presentation.
  • A confirmation or warning warrants its own full-screen or modal moment.

Reach for something else when

  • A transient message dismisses on its own. → Toast
  • A section-scoped "nothing here yet" inside a card or modal. → AppEmptyState
  • An inline alert about a validation error or status change. → AppAlert
  • A persistent announcement bar across the whole page. → AppBanner

Every option

The whole surface of the component, one cell per value — every status, icon overrides on both the named and numeric statuses, and every content composition.

status — all seven values

status="success"

Success

Supporting message goes here.
status="error"

Error

Supporting message goes here.
status="warning"

Warning

Supporting message goes here.
status="info"

Info

Supporting message goes here.
status="403"

Something went wrong

Supporting message goes here.
status="404"

Something went wrong

Supporting message goes here.
status="500"

Something went wrong

Supporting message goes here.

icon override

status="404" (no override — code figure, no icon)

Page not found

status="404" icon="zap" (override wins over the code figure)

Off exploring

status="success" icon="sparkles" (override replaces the default glyph)

Milestone reached!

icon as a node — React-only (icon accepts a ReactNode); Razor's icon is a Bootstrap Icons name string only

Custom icon node

content composition

(no attributes) — default icon only, no title block
title only

Done

title + subtitle

Order confirmed

Order #12345 will ship tomorrow.
title + subtitle + actions (inner content)

Order confirmed

Order #12345 will ship tomorrow.
title + subtitle + actions + <app-result-extra> (full composition)

Order confirmed

Order #12345 will ship tomorrow.

A confirmation email has been sent.

title as a node — React-only (icon/title/subtitle accept ReactNode); Razor's title is a plain string

Success!

long title and subtitle (overflow / wrap check)

This is a deliberately long title to check how the heading wraps inside a narrow result panel

And an equally long supporting message, to confirm the subtitle wraps cleanly under the heading without breaking the layout of the panel.
class="checkout-result" — caller class appended

Done

Attributes

AttributeTypeDefaultDescription
statusstringinfoThe outcome status: 'success'|'error'|'warning'|'info'|'403'|'404'|'500'. Picks a default icon and tone; numeric statuses render as a large code figure.
titlestring—The heading — what happened.
subtitlestring—Supporting message below the title.
iconstring—Override the status-default icon (Bootstrap Icons name). React-only: also accepts a node — Razor's icon is a name string only.
(content)markup—Inner content renders below the subtitle as the actions slot — usually one or two app-buttons. Matches React's actions prop.
app-result-extramarkup—A nested tag whose content renders below the actions as the extra slot. Matches React's children prop.
classstring—Extra classes on the result container, appended to the component's own classes. Matches React's className prop.