🚧 This website is work in progress 👷
Components
Structure
Empty

Empty

Empty states are a way to improve the user experience of your product, from onboarding to encouraging users to interact with your app.

Import statement

import { Empty } from "@wfp/react"

Editable Example

<Empty
  title="No results"
  kind="large"
  icon={<Info style={{ width: "3em" }} />}
>
  There are no results for your search
</Empty>;

Usage

Import the Empty component:

import Empty from "@wfp/react";

Basic usage:

<Empty title="No Data Available" kind="large">
  We couldn’t find any results based on your search criteria.
</Empty>

Advanced usage with an icon and a button:

import { MyCustomIcon, MyButton } from "./MyComponents";


<Empty
  title="No Data Found"
  icon={<MyCustomIcon />}
  button={<MyButton onClick={() => doSomething()}>Retry</MyButton>}
>
  Please check your filters or try searching with different keywords.
</Empty>;

Notes

  • The component internally provides default Icon and Text components, but these can be replaced with custom components via the components prop. This allows for a greater degree of flexibility and customization.

  • Always ensure that the text and iconography used are clear and provide meaningful hints to users about the next possible steps.

On this page

References