Handling Empty States

In some cases, you may want to display a message to the user when there is no data to display. This is called an empty state. You can use the EmptyState component to display a message to the user when there is no data to display.

Assets and Icons

All empty state assets are located in the src\assets\img\empty-states\v2 directory. You can import them like this:

import EmptyState from "@/components/EmptyState";
import statsEmptyStateSvg from "@/assets/img/empty-states/v2/stats.svg";
 
const MyComponent = () => {
  return (
    <EmptyState
      heading="No effort summary available"
      action={{
        content: "Change date range",
        onAction: () => {
          // open the date range picker
          setOpenDateRangePicker(true);
        },
      }}
    >
      <p>
        There is no effort summary available for the selected date range. Please
        change the date range and try again.
      </p>
    </EmptyState>
  );
};

Example

Adding Page Title Handling Overflowing Text