EmptyState

Placeholder for empty content areas with icon, title, description, and action

Default

Usage

import { EmptyState } from '@tryvienna/ui'

<div className="w-96">
  <EmptyState title="No items yet" description="Get started by creating your first item." />
</div>

Examples

Default

Default

<div className="w-96">
  <EmptyState title="No items yet" description="Get started by creating your first item." />
</div>

With Icon

With Icon

<div className="w-96">
  <EmptyState
    icon={<InboxIcon />}
    title="No messages"
    description="You don't have any messages yet. Messages from your team will appear here."
  />
</div>

With Action

With Action

<div className="w-96">
  <EmptyState
    icon={<FileIcon />}
    title="No documents"
    description="Upload your first document to get started with the workspace."
    action={<Button>Upload Document</Button>}
  />
</div>

Search No Results

Search No Results

<div className="w-96">
  <EmptyState
    icon={<SearchIcon />}
    title="No results found"
    description="Try adjusting your search terms or filters to find what you're looking for."
    action={
      <Button variant="outline" size="sm">
        Clear Filters
      </Button>
    }
  />
</div>

API Reference

EmptyState

Prop	Type	Default	Description
icon	React.ReactNode	-
title	string	-
description	string	-
action	React.ReactNode	-

Data Attributes

Component	data-slot
EmptyState	"empty-state"