Skip to main content

​
Overview

The Empty component displays a message and optional actions when there is no content to show, such as empty lists, search results, or data tables.

​
Basic usage

<template>
  <UEmpty
    icon="i-lucide-inbox"
    title="No messages"
    description="You don't have any messages yet."
  />
</template>

​
With action

<template>
  <UEmpty
    icon="i-lucide-file-text"
    title="No documents"
    description="Get started by creating a new document."
  >
    <UButton @click="createDocument">Create Document</UButton>
  </UEmpty>
</template>

​
Props

​
icon
string
Icon to display in the empty state.
​
title
string
Title text.
​
description
string
Description text.

​
Slots

​
default
slot
Content to display below the description (typically action buttons).
​
icon
slot
Custom icon content.

Build docs developers (and LLMs) love

Get started for freeTalk to us