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

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

# Result

Present operation results, empty content and other states.

## Operation results


Project created

Everything is ready for your next great idea.

Back to listOpen project

basic.tsx

Copy code

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

export function ResultBasic() {
  return (
    <Result
      status="success"
      title="Project created"
      description="Everything is ready for your next great idea."
      extra={
        <Space>
          <Button variant="outline">Back to list</Button>
          <Button>Open project</Button>
        </Space>
      }
    />
  );
}
```

Expand code

## Empty content and other states


No projects yet

Create your first project to collect ideas.

Create project

Storage is almost full

Remove unused content or adjust your storage limit.

Publishing failed

Check your connection and try again.

Retry

Review in progress

The project page will update when it is complete.

states.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/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="No projects yet"
        description="Create your first project to collect ideas."
        extra={<Button variant="outline">Create project</Button>}
      />
      <Result
        status="warning"
        size="sm"
        title="Storage is almost full"
        description="Remove unused content or adjust your storage limit."
      />
      <Result
        status="error"
        size="sm"
        title="Publishing failed"
        description="Check your connection and try again."
        extra={<Button variant="outline">Retry</Button>}
      />
      <Result
        status="info"
        size="sm"
        title="Review in progress"
        description="The project page will update when it is complete."
      />
    </Space>
  );
}
```

Expand code

## Custom content


Let your ideas grow

Replace the icon, content and actions to suit your workflow.

Add next steps, issue details or other helpful information here.

custom.tsx

Copy code

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

import { Leaf } from 'lucide-react';

export function ResultCustom() {
  return (
    <Result
      title="Let your ideas grow"
      description="Replace the icon, content and actions to suit your workflow."
      icon={<Leaf />}
    >
      <p>Add next steps, issue details or other helpful information here.</p>
    </Result>
  );
}
```

Expand code

## Result API

| Property              | Type                                                     | Default             | Description                          |
| --------------------- | -------------------------------------------------------- | ------------------- | ------------------------------------ |
| `status`              | `'empty' \| 'success' \| 'warning' \| 'error' \| 'info'` | `'empty'`           | Result status                        |
| `title / description` | `ReactNode`                                              | Localized title / — | Title / description; null hides them |
| `icon`                | `ReactNode`                                              | Status icon         | Custom icon; null hides it           |
| `extra`               | `ReactNode`                                              | —                   | Action buttons or links              |
| `children`            | `ReactNode`                                              | —                   | Additional information               |
| `size`                | `'sm' \| 'md'`                                           | `'md'`              | Content spacing and icon size        |

## Types

Import these types to define props or prepare data.

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

## Usage notes

Use `status="empty"` for empty content. Success, warning, error and information have matching icons and colors. Customize `icon`, `title`, `description` and `extra` as needed.

The original `Empty` remains as a compatibility entry. Migrate to `Result`: rename `image` to `icon`, `description` to `title`, and move action buttons to `extra`.

## Empty API

Compatibility component; prefer `Result` for new code. `EmptyProps` also accepts native `div` attributes.

| Property      | Type           | Default          | Description                               |
| ------------- | -------------- | ---------------- | ----------------------------------------- |
| `image`       | `ReactNode`    | Empty state icon | Custom icon; `null` hides it.             |
| `description` | `ReactNode`    | Localized title  | Empty state description; `null` hides it. |
| `size`        | `'sm' \| 'md'` | `'md'`           | Content spacing and icon size.            |
| `children`    | `ReactNode`    | —                | Actions below the description.            |