> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/components/result.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt.

# Result 结果

展示操作结果、空数据或需要关注的状态。

## 操作结果


项目已创建

一切准备就绪，可以开始你的下一个好想法。

返回列表进入项目

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/result/basic.tsx"
import { Button, Result, Space } from '@ifhover/leaf-ui';

export function ResultBasic() {
  return (
    <Result
      status="success"
      title="项目已创建"
      description="一切准备就绪，可以开始你的下一个好想法。"
      extra={
        <Space>
          <Button variant="outline">返回列表</Button>
          <Button>进入项目</Button>
        </Space>
      }
    />
  );
}
```

展开代码

## 空数据与其他状态


还没有项目

创建你的第一个项目，开始整理灵感。

创建项目

存储空间即将用完

清理不需要的内容，或调整空间配额。

发布未完成

请检查连接后重试。

重试

审核正在进行

完成后将在项目页面更新。

states.tsx

复制代码

```tsx lineNumbers file="../../src/examples/result/states.tsx"
import { Button, Result, Space } from '@ifhover/leaf-ui';

export function ResultStates() {
  return (
    <Space direction="vertical" align="stretch">
      <Result
        status="empty"
        size="sm"
        title="还没有项目"
        description="创建你的第一个项目，开始整理灵感。"
        extra={<Button variant="outline">创建项目</Button>}
      />
      <Result
        status="warning"
        size="sm"
        title="存储空间即将用完"
        description="清理不需要的内容，或调整空间配额。"
      />
      <Result
        status="error"
        size="sm"
        title="发布未完成"
        description="请检查连接后重试。"
        extra={<Button variant="outline">重试</Button>}
      />
      <Result status="info" size="sm" title="审核正在进行" description="完成后将在项目页面更新。" />
    </Space>
  );
}
```

展开代码

## 自定义内容


让灵感继续生长

图标、内容和操作区都可以替换。

这里可以放置后续步骤、问题说明或其他补充内容。

custom.tsx

复制代码

```tsx lineNumbers file="../../src/examples/result/custom.tsx"
import { Result } from '@ifhover/leaf-ui';

import { Leaf } from 'lucide-react';

export function ResultCustom() {
  return (
    <Result title="让灵感继续生长" description="图标、内容和操作区都可以替换。" icon={<Leaf />}>
      <p>这里可以放置后续步骤、问题说明或其他补充内容。</p>
    </Result>
  );
}
```

展开代码

## Result API

| 属性                    | 类型                                                       | 默认值        | 说明              |
| --------------------- | -------------------------------------------------------- | ---------- | --------------- |
| `status`              | `'empty' \| 'success' \| 'warning' \| 'error' \| 'info'` | `'empty'`  | 结果状态            |
| `title / description` | `ReactNode`                                              | 语言默认标题 / — | 标题 / 说明，null 隐藏 |
| `icon`                | `ReactNode`                                              | 状态图标       | 自定义图标；null 隐藏   |
| `extra`               | `ReactNode`                                              | —          | 底部按钮或链接         |
| `children`            | `ReactNode`                                              | —          | 补充信息            |
| `size`                | `'sm' \| 'md'`                                           | `'md'`     | 内容间距和图标大小       |

## 类型

可导入以下类型定义属性、组装数据或处理回调。

```ts
import type { EmptyProps, ResultProps } from '@ifhover/leaf-ui';
```

## 使用说明

空数据使用 `status="empty"`，成功、警告、错误与信息状态有对应图标和颜色。传入 `icon`、`title`、`description` 和 `extra` 可自定义内容。

原来的 `Empty` 仍保留兼容入口，建议迁移为 `Result`：`image` 改为 `icon`，`description` 改为 `title`，原本的操作按钮移到 `extra`。

## Empty API

兼容组件，新增用法请使用 `Result`。`EmptyProps` 同时支持原生 `div` 属性。

| 属性            | 类型             | 默认值    | 说明               |
| ------------- | -------------- | ------ | ---------------- |
| `image`       | `ReactNode`    | 空数据图标  | 自定义图标；`null` 隐藏。 |
| `description` | `ReactNode`    | 语言默认标题 | 空数据说明；`null` 隐藏。 |
| `size`        | `'sm' \| 'md'` | `'md'` | 内容间距和图标大小。       |
| `children`    | `ReactNode`    | —      | 底部操作内容。          |