Leaf UI
  • English

      • Empty

      Explain empty content and provide a next action.

      Basic usage

      Live previewBasic usage
      No projects yet
      No data
      No search results
      basic.tsx
      import { Button, Empty } from '@sudden3/leaf-ui';

export function EmptyBasic() {
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <Empty description="No projects yet">
        <Button>Create project</Button>
      </Empty>
      <Empty size="sm" />
      <Empty image={null} description="No search results" />
    </div>
  );
}

      Empty API

      PropertyTypeDefaultDescription
      imageReactNodeInbox iconCustom image; null hides it
      descriptionReactNodeNo dataDescription; null hides it
      childrenReactNode—Actions
      size'sm' | 'md''md'Display size

      Types

      Import the exported types when defining props or building item lists.

      import type { EmptyProps } from '@sudden3/leaf-ui';

      Usage notes

      Explain why content is empty and place action buttons in children when useful.