Empty State

Basic Usage

Image Slot Here

No results found

Try a different search term

<template>
  <spr-empty-state description="No results found" subDescription="Try a different search term">
    <div>Image Here</div>

    <template #button>
      <spr-button tone="success">Retry</spr-button>
    </template>
  </spr-empty-state>
</template>

Images

You can also use the image prop to display an image in the defined empty state. The image prop accepts a string value that corresponds to the image's name.

List of images that can be used in the empty state component.

• bug
• clock
• dashboard
• employees
• government-id

• integration
• list
• social-media-handles
• work-in-progress
• work-location

No results found

Try a different search term

<template>
  <spr-empty-state description="No results found" subDescription="Try a different search term" image="bug">
    <template #button>
      <spr-button tone="success">Retry</spr-button>
    </template>
  </spr-empty-state>
</template>

Image Size

Image size can be controlled by passing the size prop. The default size is small. (small and large)

No results found

Try a different search term

No results found

Try a different search term

<template>
  <spr-empty-state description="No results found" subDescription="Try a different search term" image="bug" size="small">
    <template #button>
      <spr-button tone="success">Retry</spr-button>
    </template>
  </spr-empty-state>

  <spr-empty-state
    description="No results found"
    subDescription="Try a different search term"
    image="work-location"
    size="large"
  >
    <template #button>
      <spr-button tone="success">Retry</spr-button>
    </template>
  </spr-empty-state>
</template>

API Reference

Name	Description	Type	Available Values	Default
description	The main description text for the empty state.	String	-	'No results found'
subDescription	Additional text providing more context for the empty state.	String	-	'Try a different search term.'
size	Controls the size of the empty state.	'small', 'large'	'small', 'large'	'small'
image	Specifies the image to display in the empty state.	String	'bug', 'clock', 'dashboard', 'employees', 'government-id', 'integration', 'list', 'social-media-handles', 'work-in-progress', 'work-location'	'list'
hasButton	Indicates whether the empty state includes a button slot.	Boolean	true, false	false