Result
resultPresents success, error, information, warning, permission, or server outcomes with detail and action slots.
Usage
Successful result
Success feedback after the operation is completed, the content slot carries supplementary information, and the children slot holds subsequent operations.
<Result status="success" title="Payment successful" subTitle="Order #2024-0612 has been completed and is expected to ship within 3 days.">
<Button size="sm">View order</Button>
<Button size="sm" variant="outline">Return to homepage</Button>
</Result>Failure result (with details)
The content area is rendered below the subtitle and above the operation area, which is suitable for stacking error details.
<Result
status="error"
title="Submission failed"
subTitle="Please check and modify the following information and try again."
content="The account name contains illegal characters; the mobile phone number format is incorrect."
>
<Button size="sm">Return for modification</Button>
</Result>Information and Warnings
info / warning Two semantic states, with respective built-in icons and semantic colors.
<>
<Result status="info" title="Under review" subTitle="The information has been submitted and is expected to be reviewed within 1 working day." />
<Result status="warning" title="Expiring soon" subTitle="Your membership will expire in 3 days, please renew in time." />
</>HTTP error page
403 / 404 / 500 Full page placeholder for exception routing, built-in lock/search/server icon.
<Result status="404" title="404" subTitle="Sorry, the page you visited does not exist.">
<Button size="sm" variant="outline">Return to homepage</Button>
</Result>Hide icon
icon passes null without rendering the icon area, only retaining the title and description.
<Result icon={null} status="info" title="No icon results" subTitle="Only display text, do not render top status icon." />When to use
Use Result as the primary content of a page or region for a final outcome or error, such as payment success, submission failure, or a 403/404/500 page. It centers a prominent icon, title, and actions. Use Alert for lightweight inline feedback or Toast for transient feedback.
Import
import { Result } from "@hulianui/ui"Props
Inherits Omit<HTMLAttributes<HTMLDivElement>, "title" | "content">.
| Name | Type | Default | Description |
|---|---|---|---|
| status | "success"|"error"|"info"|"warning"|"403"|"404"|"500" | "info" | Selects the built-in icon and semantic tone. |
Slots
| Slot | Type | Description |
|---|---|---|
| icon | ReactNode | Replaces the status icon. Pass null to omit the icon region entirely. |
| title | ReactNode | Primary title. |
| subTitle | ReactNode | Supporting explanation. |
| content | ReactNode | Detail region, such as an error stack, between titles and actions. |
| children | ReactNode | Bottom action area. |
Example
<Result status="success" title="Payment complete" subTitle="Order #2024-0612 is complete and ships within three days.">
<Button size="sm">View order</Button>
<Button size="sm" variant="outline">Home</Button>
</Result>
<Result status="error" title="Submission failed" subTitle="Correct the following information and retry." content="The account name contains invalid characters; the phone number is malformed.">
<Button size="sm">Edit submission</Button>
</Result>Usage guidelines
- The
"403","404", and"500"status values are string literals, not numbers. - Only
icon={null}removes the icon region; omitting icon derives one from status. - No other known caveats.
Related
Alert · Banner · Toast · Notification · ServiceMessage · GiftFeed
Playground
<Result
status="success"
title="Action completed"
subTitle="Your submission has been saved and you can continue with subsequent operations."
>
<Button size="sm">Return to homepage</Button>
</Result>