Result

result

结果页 · 7 状态(success/error/info/warning/403/404/500)内置图标+语义色 + 标题/副标题/详情/操作槽(零依赖·RSC)

用法

成功结果

操作完成后的成功反馈，content 槽承载补充信息，children 槽放后续操作。

支付成功

订单 #2024-0612 已完成，预计 3 天内发货。

tsx

<Result status="success" title="支付成功" subTitle="订单 #2024-0612 已完成，预计 3 天内发货。">
  <Button size="sm">查看订单</Button>
  <Button size="sm" variant="outline">返回首页</Button>
</Result>

失败结果（含详情）

content 区渲染在副标题下方、操作区上方，适合堆错误明细。

提交失败

请检查并修改以下信息后重试。

账户名包含非法字符；手机号格式不正确。

tsx

<Result
  status="error"
  title="提交失败"
  subTitle="请检查并修改以下信息后重试。"
  content="账户名包含非法字符；手机号格式不正确。"
>
  <Button size="sm">返回修改</Button>
</Result>

信息与警告

info / warning 两种语义状态，搭配各自的内置图标与语义色。

审核中

资料已提交，预计 1 个工作日内完成审核。

即将到期

你的会员将于 3 天后到期，请及时续费。

tsx

<>
  <Result status="info" title="审核中" subTitle="资料已提交，预计 1 个工作日内完成审核。" />
  <Result status="warning" title="即将到期" subTitle="你的会员将于 3 天后到期，请及时续费。" />
</>

HTTP 错误页

403 / 404 / 500 用于异常路由的整页占位，内置锁/搜索/服务器图标。

404

抱歉，你访问的页面不存在。

tsx

<Result status="404" title="404" subTitle="抱歉，你访问的页面不存在。">
  <Button size="sm" variant="outline">返回首页</Button>
</Result>

隐藏图标

icon 传 null 不渲染图标区，只保留标题与说明。

无图标结果

仅展示文本，不渲染顶部状态图标。

tsx

<Result icon={null} status="info" title="无图标结果" subTitle="仅展示文本，不渲染顶部状态图标。" />

何时用

整页/整块展示一次操作的最终结果或异常页时用（支付成功、提交失败、403/404/500 错误页），居中大图标 + 标题 + 操作按钮。它是占满区域的结果反馈；行内/局部的轻量提示用 Alert，瞬时反馈用 Toast。零依赖、可作 RSC。

导入

import { Result } from "@hulianui/ui"

Props

继承 Omit<HTMLAttributes<HTMLDivElement>, "title" | "content">。

名称	类型	默认	说明
status	`"success"｜"error"｜"info"｜"warning"｜"403"｜"404"｜"500"`	`"info"`	状态，决定内置图标与语义色

Slots

插槽	类型	说明
icon	`ReactNode`	自定义图标覆盖内置（不传按 status 派生）；传 `null` 则不渲染图标区
title	`ReactNode`	主标题
subTitle	`ReactNode`	副标题/辅助说明
content	`ReactNode`	详情内容区（如错误堆栈），渲染在标题下方、操作区上方
children	`ReactNode`	操作区（按钮等），渲染在最下方

禁忌 / 坑

status 的 "403"/"404"/"500" 是字符串字面量，别写成数字 404。
icon={null} 才彻底不渲染图标区；不传 icon 会按 status 用内置图标。
暂无其它已知坑。

Playground

statustitlesubTitle

操作成功

你的提交已保存，可继续后续操作。

<Result
  status="success"
  title="操作成功"
  subTitle="你的提交已保存，可继续后续操作。"
>
  <Button size="sm">返回首页</Button>
</Result>

用法

成功结果

操作完成后的成功反馈，content 槽承载补充信息，children 槽放后续操作。

支付成功

订单 #2024-0612 已完成，预计 3 天内发货。

tsx

<Result status="success" title="支付成功" subTitle="订单 #2024-0612 已完成，预计 3 天内发货。">
  <Button size="sm">查看订单</Button>
  <Button size="sm" variant="outline">返回首页</Button>
</Result>

失败结果（含详情）

content 区渲染在副标题下方、操作区上方，适合堆错误明细。

提交失败

请检查并修改以下信息后重试。

账户名包含非法字符；手机号格式不正确。

tsx

<Result
  status="error"
  title="提交失败"
  subTitle="请检查并修改以下信息后重试。"
  content="账户名包含非法字符；手机号格式不正确。"
>
  <Button size="sm">返回修改</Button>
</Result>

信息与警告

info / warning 两种语义状态，搭配各自的内置图标与语义色。

审核中

资料已提交，预计 1 个工作日内完成审核。

即将到期

你的会员将于 3 天后到期，请及时续费。

tsx

<>
  <Result status="info" title="审核中" subTitle="资料已提交，预计 1 个工作日内完成审核。" />
  <Result status="warning" title="即将到期" subTitle="你的会员将于 3 天后到期，请及时续费。" />
</>

HTTP 错误页

403 / 404 / 500 用于异常路由的整页占位，内置锁/搜索/服务器图标。

404

抱歉，你访问的页面不存在。

tsx

<Result status="404" title="404" subTitle="抱歉，你访问的页面不存在。">
  <Button size="sm" variant="outline">返回首页</Button>
</Result>

隐藏图标

icon 传 null 不渲染图标区，只保留标题与说明。

无图标结果

仅展示文本，不渲染顶部状态图标。

tsx

<Result icon={null} status="info" title="无图标结果" subTitle="仅展示文本，不渲染顶部状态图标。" />

名称

类型

默认

说明

status

"success"｜"error"｜"info"｜"warning"｜"403"｜"404"｜"500"

"info"

状态，决定内置图标与语义色

Slots

插槽	类型	说明
icon	`ReactNode`	自定义图标覆盖内置（不传按 status 派生）；传 `null` 则不渲染图标区
title	`ReactNode`	主标题
subTitle	`ReactNode`	副标题/辅助说明
content	`ReactNode`	详情内容区（如错误堆栈），渲染在标题下方、操作区上方
children	`ReactNode`	操作区（按钮等），渲染在最下方

Result

用法

成功结果

失败结果（含详情）

信息与警告

HTTP 错误页

隐藏图标

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground

Result

用法

成功结果

失败结果（含详情）

信息与警告

HTTP 错误页

隐藏图标

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground