PxEmptyState

A placeholder block for empty lists, tables, or search results. Accepts an icon, a title, an optional description, and an action slot for a call-to-action button.

Usage

Demo

No results found

Try adjusting your filters or search terms.

<script setup>
import { SearchX } from '@lucide/vue'
import { PxEmptyState } from 'praxis-vue-ui'
</script>

<template>
  <PxEmptyState
    title="No results found"
    description="Try adjusting your filters or search terms."
    :icon="SearchX"
  />
</template>

With Action

With Action

No items yet

Get started by creating your first item.

<script setup>
import { Inbox } from '@lucide/vue'
import { PxEmptyState, PxButton } from 'praxis-vue-ui'
</script>

<template>
  <PxEmptyState title="No items yet" description="Get started by creating your first item." :icon="Inbox">
    <template #action>
      <PxButton label="Create Item" />
    </template>
  </PxEmptyState>
</template>

API Reference

Prop	Type	Default	Description
titlerequired	string	—	—
description	string	—	—
icon	Component	—	—