Empty State
Empty state placeholder with optional action
SaaSAnalytics
Overview
EmptyState provides a centered placeholder for empty data scenarios in dashboards and lists. It displays a title, optional description, a customizable icon, and an optional action button to guide users toward their next step.
Usage
import { EmptyState } from "@leanicon/web-builder-library/saas";
import { FileText } from "lucide-react";
<EmptyState
title="No documents found"
description="Upload your first document to get started."
icon={FileText}
action={{ label: "Upload document", onClick: () => {} }}
/>;Variants
Default
No data available
There is no data to display at the moment. Check back later or adjust your filters.
Dark
No data available
There is no data to display at the moment. Check back later or adjust your filters.
With Action
No reports yet
You haven't created any reports yet. Start by generating your first report.
With Action - Dark
No reports yet
You haven't created any reports yet. Start by generating your first report.
No Results (Search)
No results found
Your search returned no results. Try a different search term.
No Team Members
No team members
Invite your colleagues to collaborate on this project together.
Title Only
Nothing here yet
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
title | string | No data available | No | |
description | string | — | No | |
icon | LucideIcon | — | No | |
action | EmptyStateAction | — | No |