EmptyState

Empty states communicate that there’s no information, data or values to display in a given context.

Action links

You can specify any content as the message or action. This can be a button, a link, or any other component that you want to use to guide the user to the next step.

No visualization data available

Back to homepage

<HvEmptyState
  title="No visualization data available"
  icon={<BarChart />}
  action={
    <div className="flex flex-col gap-xs items-center">
      <HvButton variant="secondarySubtle">Upload data</HvButton>
      <HvTypography link component="a" href="#">
        Back to homepage
      </HvTypography>
    </div>
  }
/>

<HvEmptyState
  title="No visualization data available"
  icon={<BarChart />}
  action={
    <div className="flex flex-col gap-xs items-center">
      <HvButton variant="secondarySubtle">Upload data</HvButton>
      <HvTypography link component="a" href="#">
        Back to homepage
      </HvTypography>
    </div>
  }
/>