UIEmpty

UIEmpty

UIEmpty is a placeholder component that provides visual feedback when no data is available or when a container has no content. It helps improve the user experience by communicating the empty state with optional illustrations, messages, and actions.

<template>
  <UIEmpty
    description="No data available"
    image="/path/to/empty-image.svg"
  >
    <template #footer>
      <UIButton type="primary">Create New</UIButton>
    </template>
  </UIEmpty>
</template>

Props

• description (string): The text description explaining the empty state
• image (string): URL of the image to display as the empty state illustration
• imageStyle (object): Custom styling for the empty state image
• imageSize (number): Size of the image in pixels

Slots

• image: Custom image or icon content
• description: Custom description content
• footer: Additional content like action buttons
• default: Custom content that replaces the default empty layout

Usage Examples

1. Basic Empty State:

<template>
  <UIEmpty description="No data available" />
</template>

2. Custom Image:

<template>
  <UIEmpty
    description="Your inbox is empty"
    image="/assets/empty-inbox.svg"
    :imageSize="120"
  />
</template>

3. With Action Button:

<template>
  <UIEmpty description="No tasks found">
    <template #footer>
      <UIButton type="primary">Add Task</UIButton>
    </template>
  </UIEmpty>
</template>

4. Custom Description with HTML:

<template>
  <UIEmpty>
    <template #description>
      <span>No results match your <strong>search criteria</strong>.</span>
    </template>
  </UIEmpty>
</template>

5. Fully Customized Empty State:

<template>
  <UIEmpty>
    <template #image>
      <UiIcon name="inbox" :size="64" />
    </template>
    <template #description>
      <h3>No Messages</h3>
      <p>You have no new messages in your inbox.</p>
    </template>
    <template #footer>
      <UIButton>Refresh</UIButton>
      <UIButton type="primary">Compose</UIButton>
    </template>
  </UIEmpty>
</template>

Best Practices

1. Content Guidelines:

   • Use clear, concise language
   • Explain why the content is empty
   • Suggest an action when appropriate
   • Match messaging to the application context

2. Visual Design:

   • Use illustrations that match the UI style
   • Ensure the empty state is visible but not overwhelming
   • Consider using branded imagery
   • Maintain proper spacing and alignment

3. User Experience:

   • Provide guidance on how to add content
   • Don’t hide essential UI functionality in empty states
   • Consider first-time user experiences
   • Make empty states helpful rather than just informative

4. Responsiveness:

   • Adjust empty state sizing for different viewports
   • Ensure legibility on small screens
   • Consider simplified versions for mobile
   • Test across different device sizes