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

Current image is bug

Try a different image

<template>
  <spr-empty-state
    :description="`Current image is ${currentImage}`"
    subDescription="Try a different image"
    :image="currentImage"
  >
    <template #button>
      <div class="spr-flex spr-flex-col spr-gap-4">
        <spr-button tone="success">Retry</spr-button>
        <spr-button variant="secondary" @click="changeImage">Change Image</spr-button>
      </div>
    </template>
  </spr-empty-state>
</template>

<script setup>
import { ref } from 'vue';

const imageTypes = [
  'bug',
  'clock',
  'dashboard',
  'employees',
  'government-id',
  'integration',
  'list',
  'social-media-handles',
  'work-in-progress',
  'work-location'
];

const currentImage = ref('bug');

const changeImage = () => {
  // Get the current index of the image
  const currentIndex = imageTypes.indexOf(currentImage.value);
  // Move to the next image in the array, or back to the first if at the end
  const nextIndex = (currentIndex + 1) % imageTypes.length;
  currentImage.value = imageTypes[nextIndex];
};
</script>

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

Props

Name	Description	Type	Available Values	Default
description	The main description text for the empty state. This text is displayed prominently to inform users about the absence of content or search results.	String	Any text string	'No results found'
subDescription	Additional text providing more context or guidance for the empty state. This secondary text appears below the main description with a lighter color to provide further explanation or suggestions.	String	Any text string	'Try a different search term.'
size	Controls the overall size of the empty state component, affecting both the container dimensions and the image size: small: More compact representation (min-height: 240px, image: 120x120px) large: More prominent representation (min-height: 360px, image: 200x200px)	String	'small', 'large'	'small'
image	Specifies the predefined image to display in the empty state. The component automatically loads the SVG image from the assets directory based on this prop value. This is used when no custom image is provided via the default slot.	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. When set to true, the component expects content to be provided in the button slot. This prop is primarily used for internal state management.	Boolean	true, false	false
emptyStateCustomClasses	Additional CSS classes to apply to the empty state container. This allows for custom styling without modifying the component's internal styling.	String	Any valid CSS class string	''

Events

Name	Description	Parameters
onClick	Emitted when the empty state component is clicked. This event is defined in the component but not actively emitted in the current implementation.	None

Slots

Name	Description
default	The default slot can be used to replace the predefined image with custom content. If provided, this slot content will be displayed instead of the image specified by the image prop. The content will receive the same size classes as the predefined image would have, based on the size prop.
button	Used to provide action buttons or other interactive elements that will be displayed below the description text. Typically contains a button that allows users to retry an action or navigate elsewhere.