Kaleidoscope | EmptyState

EmptyState

EmptyStates show users when there is no data in a view, and can provide next steps to create content or refine parameters in order to display data.

Default

Use a basic EmptyState for things like search popovers when there are no results returned. The title should clearly communicate the reason there is no data to display, and the subtitle should provide additional information or a path forward to show data.


Editable example
<EmptyState
  title="No results found"
  subtitle="Try a different search term"
/><EmptyState
  title="No results found"
  subtitle="Try a different search term"
/>

Dashed outline

Use the isDashed prop to render a dashed outline for EmptyStates that need a stronger implication that content can be added to them, such as dashboard pages where there is a clear path forward to add pages to a folder.


Editable example
<EmptyState isDashed title="There's nothing here" /><EmptyState isDashed title="There's nothing here" />