EmptyState

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

Source Code

uikit-react-core

No data routes

After you start adding Data Routes, they will appear here.

Check the documentation for help.

title

message

action

<HvEmptyState 
  title="No data routes"
  message="After you start adding Data Routes, they will appear here."
  action="Check the documentation for help."
  icon={<HvIconInfo />}
/>

<HvEmptyState 
  title="No data routes"
  message="After you start adding Data Routes, they will appear here."
  action="Check the documentation for help."
  icon={<HvIconInfo />}
/>

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>
  }
/>

Dropdown Menu File Uploader