Prism Docs

Empty State

Display placeholders for empty data sets with icons, illustrations, and call-to-actions.

Default State

No Records Found

<prism-empty 
  title="No Records Found" 
  description="We couldn't find any items matching your current view." 
/>

Variations

Inbox Zero

<prism-empty 
  icon="ri-inbox-archive-line"
  title="Inbox Zero" 
  description="You have no new messages." 
/>

No Results

<prism-empty 
  icon="ri-file-search-line"
  title="No Results" 
  description="Try adjusting your search terms." 
/>

Actions Integration

First Step

<prism-empty 
  icon="ri-add-circle-line"
  title="First Step" 
  description="Create your first project to start tracking your progress.">
  <div class="flex gap-3 justify-center mt-4">
    <prism-button label="Create Project" icon="ri-add-line" />
    <prism-button label="Import Data" variant="outline" />
  </div>
</prism-empty>

Custom Illustrations

Empty state illustration

Something Went Wrong

<prism-empty 
  image="https://illustrations.popsy.co/gray/crashed-error.svg" 
  title="Something Went Wrong" 
  description="We're having trouble connecting to the server.">
  <prism-button label="Retry Now" class="mt-4" />
</prism-empty>
NameTypeDefaultDescription
iconstring'ri-inbox-2-line'RemixIcon class name. Hidden if image is set.
imagestring''URL for a custom illustration image.
titlestring'No Data'Main heading text.
descriptionstring''Secondary helper text.