Empty State

TuiEmpty is used to display a placeholder prompt when a list, container, or page has no content. It typically includes an icon, a descriptive text, and supports adding action buttons to guide users toward the next step.

This component is also reused internally by components like TuiSelect and TuiTree to display states when no matching data is found.

Basic Usage

The simplest usage is to use <TuiEmpty /> directly. By default, it displays a warning icon and a "No Content" prompt.

<template>
  <div class="demo-box">
    <TuiEmpty />
  </div>
</template>

Custom Content

You can customize the icon via the icon property and the prompt text via the text property.

<template>
  <div class="demo-box">
    <TuiEmpty icon="tui-icon ti-star" />
    
    <TuiEmpty text="Your shopping cart is empty" />
  </div>
</template>

Border Appearance

Adding the bordered property adds a border and padding to the component. This style is commonly used inside cards or dropdown menus to make the empty state area more independent and distinct.

<template>
  <div style="width: 300px;">
    <TuiEmpty bordered text="No Data Available" />
  </div>
</template>

Additional Operations

When you need to guide users to move past an empty state (e.g., refresh, retry, or add), you can enable a bottom button via the showButton property and configure its text and click event.

<script setup>
const handleRetry = () => {
  console.log('Retry button clicked')
}
</script>

<template>
  <TuiEmpty 
    bordered 
    showButton 
    buttonText="Refresh and Retry" 
    buttonType="primary"
    :buttonClick="handleRetry" 
  />
</template>

Size

In addition to the default size, it supports small and large sizes to adapt to different layout spaces.

• small: Suitable for narrow containers such as Select dropdowns or sidebars.
• large: Suitable for full-page empty states.

<template>
  <div class="row">
    <TuiEmpty size="small" bordered />
    
    <TuiEmpty size="large" bordered />
  </div>
</template>

API Reference

Props

Property	Description	Type	Default
text	Prompt text content	String	'暂无内容' (No Content)
icon	Icon class name	String	'tui-icon ti-alert-circle'
bordered	Whether to display border and background	Boolean	false
size	Size; options include null, 'small', 'large'	String	null
showButton	Whether to display the bottom action button	Boolean	false
buttonText	Button text	String	'返回' (Back)
buttonType	Button type; options include 'default', 'primary', 'danger', etc.	String	'default'
buttonClick	Callback function for button click	Function	—