Result 结果

一次操作完成后的结果页，成功、失败、警告或提示。

书评已发布

其他读者现在可以看到它了。

import { Button, Result } from '@hina-ui/react'

export default function Demo() {
  return (
    <Result
      status="success"
      title="书评已发布"
      description="其他读者现在可以看到它了。"
      className="w-96"
      actions={
        <>
          <Button size="sm">查看书评</Button>
          <Button size="sm" variant="ghost" tone="neutral">
            回到书架
          </Button>
        </>
      }
    />
  )
}

tsx

用法

import { Result } from '@hina-ui/react'

status 决定图标与配色，title 说明结果，description 补充影响或下一步。排布与 Empty 相同：图标、文字与操作从上到下居中，组件占满所在容器的宽度。

正在审核

通常在一天之内完成，结果会以通知告知。

import { Result } from '@hina-ui/react'

export default function Demo() {
  return (
    <Result
      title="正在审核"
      description="通常在一天之内完成，结果会以通知告知。"
      className="w-96"
    />
  )
}

tsx

示例

状态

四种状态：success、error、warning 与 info，默认为 info。

已保存

改动已经生效。

保存失败

网络中断，请稍后重试。

部分未保存

有两处改动与他人冲突。

等待审核

审核通过后会通知你。

import { Grid, Result } from '@hina-ui/react'

export default function Demo() {
  return (
    <Grid cols={2} gap="md" className="w-full max-w-2xl">
      <Result status="success" size="sm" title="已保存" description="改动已经生效。" />
      <Result status="error" size="sm" title="保存失败" description="网络中断，请稍后重试。" />
      <Result status="warning" size="sm" title="部分未保存" description="有两处改动与他人冲突。" />
      <Result status="info" size="sm" title="等待审核" description="审核通过后会通知你。" />
    </Grid>
  )
}

tsx

操作

actions 属性放置后续操作，通常是一个主要按钮，或者再加一个次要按钮。

支付未完成

银行没有确认这笔交易，款项不会被扣除。

import { Button, Result } from '@hina-ui/react'

export default function Demo() {
  return (
    <Result
      status="error"
      title="支付未完成"
      description="银行没有确认这笔交易，款项不会被扣除。"
      className="w-96"
      actions={
        <>
          <Button size="sm">重新支付</Button>
          <Button size="sm" variant="ghost" tone="neutral">
            联系客服
          </Button>
        </>
      }
    />
  )
}

tsx

补充内容

children 的内容显示在文字下方，用来放订单号、错误详情这类补充信息。

订单已提交

我们会在发货后通知你。

订单号 HN-20260907-0412

import { Button, Code, Result, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Result
      status="success"
      title="订单已提交"
      description="我们会在发货后通知你。"
      className="w-96"
      actions={
        <Button size="sm" variant="soft" tone="neutral">
          查看订单
        </Button>
      }
    >
      <Text size="sm" tone="muted">
        订单号 <Code>HN-20260907-0412</Code>
      </Text>
    </Result>
  )
}

tsx

自定义图标

icon 属性替换状态图标，可以是另一枚图标，也可以是一张插图。

今天的目标完成了

连续第七天读满三十分钟。

import { Button, Image, Result } from '@hina-ui/react'

export default function Demo() {
  return (
    <Result
      title="今天的目标完成了"
      description="连续第七天读满三十分钟。"
      className="w-96"
      icon={<Image src="/avatars/hug.webp" ratio={1} className="size-24 rounded-full" />}
      actions={<Button size="sm">继续阅读</Button>}
    />
  )
}

tsx

尺寸

三档尺寸同时改变图标、文字与内边距，lg 用于整页的结果。

已保存

改动已经生效。

已保存

改动已经生效。

已保存

改动已经生效。

import { Result, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack gap="lg" className="w-96">
      <Result status="success" size="sm" title="已保存" description="改动已经生效。" />
      <Result status="success" title="已保存" description="改动已经生效。" />
      <Result status="success" size="lg" title="已保存" description="改动已经生效。" />
    </Stack>
  )
}

tsx

API

Props

属性	类型	默认值	说明
`status`	`'success' \| 'error' \| 'warning' \| 'info'`	`'info'`	结果的状态
`title`	`string`	—	标题
`description`	`string`	—	标题下方的说明
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`className`	`string`	—	追加至根元素的类名

内容属性

属性	说明
`children`	文字下方的补充内容
`icon`	替换状态图标的图标或插图
`actions`	最下方的操作

用法

示例

状态

操作

补充内容

自定义图标

尺寸

无障碍

API

Props

内容属性