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, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/en/components/result.md.

Result

Present operation results, empty content and other states.

Operation results

Project created
Everything is ready for your next great idea.
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>
      }
    />
  );
}

Empty content and other states

No projects yet
Create your first project to collect ideas.
Storage is almost full
Remove unused content or adjust your storage limit.
Publishing failed
Check your connection and try again.
Review in progress
The project page will update when it is complete.
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>
  );
}

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
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>
  );
}

Result API

PropertyTypeDefaultDescription
status'empty' | 'success' | 'warning' | 'error' | 'info''empty'Result status
title / descriptionReactNodeLocalized title / —Title / description; null hides them
iconReactNodeStatus iconCustom icon; null hides it
extraReactNode—Action buttons or links
childrenReactNode—Additional information
size'sm' | 'md''md'Content spacing and icon size

Types

Import these types to define props or prepare data.

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.

PropertyTypeDefaultDescription
imageReactNodeEmpty state iconCustom icon; null hides it.
descriptionReactNodeLocalized titleEmpty state description; null hides it.
size'sm' | 'md''md'Content spacing and icon size.
childrenReactNode—Actions below the description.