Result

Feedback

Full-page status displays for success, error, and HTTP status codes (404, 403, 500) with action buttons

Result

Feedback pages for user actions and system states – success, error, info, warning and HTTP status pages with optional actions.

Basic usage

Use Result with a status, title, subTitle and optional extra actions.

Success with actions

Payment successful!
Your order has been placed successfully. Order #12345

Success states

Provide positive confirmation for flows like registration, upgrades and multi-step wizards.

Common success patterns

Registration complete
Your account has been created successfully. Welcome aboard!
Email verified
Your email address is now verified. You have full access to your account.

Error states

Use error results when something went wrong and the user needs to retry or contact support.

Recoverable errors

Payment failed
We couldn't process your payment. Please check your card details and try again.
Something went wrong
An unexpected error occurred while loading this page.

Info states

Informational results are great for neutral messages, notices and system updates.

Informational pages

Verification email sent
We've sent a verification link to your email. Please check your inbox.
Account under review
Your account is currently being reviewed. This typically takes 24–48 hours.

Warning states

Use status="warning" when an action is risky or requires attention before proceeding.

Risky actions & confirmations

You’re about to delete this project
This action cannot be undone. All data will be permanently removed.
Limited access
Some features are disabled until your plan is upgraded.

HTTP status pages

Use numeric status values for full-page 403, 404 and 500 experiences.

403 / 404 / 500

Page not found
The page you are looking for doesn’t exist or has been moved.
Access denied
You don’t have permission to access this page.
Server error
An error occurred on our end. Our team has been notified.

Minimal style (no actions)

Omit extra for inline or lightweight messages where no primary actions are needed.

Compact result blocks

Changes saved
Your preferences have been updated.
No results found
Try adjusting your filters or search term.
Offline mode
You’re currently working offline. Some actions may be unavailable.

Form submission flow

Combine Result with loading states to show success or error after a submission.

Submission error with retry

Submission failed
We couldn’t submit your form. Check your connection and try again.

E-commerce and product flows

Design checkout and post-purchase experiences using rich extra content and navigation actions.

Order confirmation & failure

Order placed successfully
Thank you for your purchase. We’ve emailed your receipt to you.
Order could not be completed
Your card was not charged. You can try again or use a different payment method.

Loading & async flows

Wrap async actions and show a Result once the operation finishes.

Async action pattern

Loading...

Usage Guidelines

When to Use

  • Success pages
  • Error pages
  • Status displays

Accessibility

  • Status announced
  • Action buttons accessible

Performance

  • Static rendering
  • Lazy icon loading

Common Mistakes

  • No action to recover from error
  • Generic error messages

Frequently Asked Questions

Result displays full-page status for success, error, 404, 403, and 500 states.
Yes, Result accepts custom icons or illustrations.

View on GitHub

See the full source code on GitHub

Related Components

View all
Alert

Contextual messaging with severity variants, dismissal, icons, and action button integration

Backdrop

Backdrop overlay for modals with blur effects and click-to-close functionality

Progress

Progress indicator with determinate/indeterminate modes, labels, and variant system including gradients

Snackbar

Material-style snackbar notifications with auto-dismiss, action buttons, and positioning

Previous

Resizable

Next

ScrollArea