Empty State Empty

🌏 Translated with the assistance of DeepSeek and ChatGPT

Indicates that there is nothing here.

Basic Usage

There is really nothing here.

No Data

<template>
	<px-empty></px-empty>
</template>

Description Content

The description property modifies the description text. The description slot customizes the description content.

404 Not Found

Back to Homepage

<template>
	<px-space>
		<px-empty description="404 Not Found"></px-empty>
		<px-empty>
			<template #description>
				<px-link theme="info"> Back to Homepage </px-link>
			</template>
		</px-empty>
	</px-space>
</template>

Illustration

The image slot modifies the illustration.

No Data

<template>
	<px-empty>
		<template #image>
			<IconWindowClose></IconWindowClose>
		</template>
	</px-empty>
</template>
<script setup lang="ts">
import { IconWindowClose } from '@pixelium/web-vue/icon-hn/es'
</script>

EmptyProps

Attribute	Type	Optional	Default	Description	Version
description	string	True	'No Data'	Description text.	0.0.2

EmptySlots

Slot	Parameter	Description	Version
image		Slot for empty state illustration.	0.0.2
description		Slot for description content.	0.0.2