Result

Display result pages for success, error, or informational states.

Import

import { Result } from 'asterui'

Examples

Success Result

Show success state with action buttons.

</>

Payment Successful

Your order has been confirmed and will be shipped within 2 business days.

View OrderContinue Shopping

import { Result, Button, Space } from 'asterui'

function App() {
  return (
      <Result
        status="success"
        title="Payment Successful"
        subTitle="Your order has been confirmed and will be shipped within 2 business days."
        extra={
          <Space>
            <Button color="primary">View Order</Button>
            <Button>Continue Shopping</Button>
          </Space>
        }
      />
    )
}

export default App

Error Result

Show error state with retry action.

</>

Submission Failed

Please check your information and try again.

Try Again

import { Result, Button } from 'asterui'

function App() {
  return (
      <Result
        status="error"
        title="Submission Failed"
        subTitle="Please check your information and try again."
        extra={<Button color="error">Try Again</Button>}
      />
    )
}

export default App

Info Result

Show informational message.

</>

Verification Required

Please check your email to verify your account.

import { Result } from 'asterui'

function App() {
  return (
      <Result
        status="info"
        title="Verification Required"
        subTitle="Please check your email to verify your account."
      />
    )
}

export default App

Warning Result

Show warning state.

</>

Account Suspended

Your account has been suspended due to unusual activity.

Contact Support

import { Result, Button } from 'asterui'

function App() {
  return (
      <Result
        status="warning"
        title="Account Suspended"
        subTitle="Your account has been suspended due to unusual activity."
        extra={<Button color="warning">Contact Support</Button>}
      />
    )
}

export default App

404 Page Not Found

Show 404 error page.

</>

404

Page Not Found

The page you are looking for does not exist.

Back Home

import { Result, Button } from 'asterui'

function App() {
  return (
      <Result
        status="404"
        title="Page Not Found"
        subTitle="The page you are looking for does not exist."
        extra={<Button color="primary">Back Home</Button>}
      />
    )
}

export default App

403 Forbidden

Show access denied page.

</>

403

Access Denied

You don't have permission to access this resource.

Request Access

import { Result, Button } from 'asterui'

function App() {
  return (
      <Result
        status="403"
        title="Access Denied"
        subTitle="You don't have permission to access this resource."
        extra={<Button>Request Access</Button>}
      />
    )
}

export default App

500 Server Error

Show server error page.

</>

500

Server Error

Something went wrong on our end. Please try again later.

Refresh Page

import { Result, Button } from 'asterui'

function App() {
  return (
      <Result
        status="500"
        title="Server Error"
        subTitle="Something went wrong on our end. Please try again later."
        extra={<Button color="primary">Refresh Page</Button>}
      />
    )
}

export default App

API

Result

Property	Description	Type	Default
status	Status type of the result	'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500'	'info'
title	Title of the result	React.ReactNode	-
subTitle	Subtitle of the result	React.ReactNode	-
icon	Custom icon (overrides default status icon)	React.ReactNode	-
extra	Additional action elements (typically buttons)	React.ReactNode	-
children	Additional content between subtitle and actions	React.ReactNode	-
className	Additional CSS classes	string	-
style	Inline styles	React.CSSProperties	-
data-testid	Test ID for testing	string	-

Accessibility

• Status icons have appropriate ARIA labels
• Semantic heading structure for title and subtitle
• Action buttons are keyboard accessible
• Color is not the only indicator of status