Empty State
A placeholder for empty lists, zero-data views, and no-results scenarios. Composes an icon, heading, description, and optional CTA.
Molecule
Button · Icon
When To Use
- Use Empty State when information needs to be scanned quickly and compared across multiple rows, cards, or values.
- Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
- Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.
When Not To Use
- Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
- Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.
Accessibility Notes
- Preserve table semantics for tabular data and avoid flattening structured information into generic divs.
- Use clear headings, summaries, and labels so assistive technologies can announce the data in context.
- Do not rely on color alone to communicate trend, status, or state in charts and metric cards.
Key Props / API
Props
icon, title, description, action, label, href
Example Code
import { EmptyState } from "@hilum/ui"
import { Inbox } from "lucide-react"
<EmptyState
icon={<Inbox size={20} />}
title="No messages yet"
description="When you receive messages, they'll appear here."
/>Empty State · Basic
Icon + description
The standard form
No messages yet
When you receive messages, they'll appear here.
Empty State · With action
No team members
Invite people to collaborate on this project.
Empty State · Variants
No icon
Text-only, minimal
Nothing here yet
Add your first item to get started.
Search · no results
For filtered/search empty states
No results found
Nothing matched "design tokens". Try a different search.
Empty State · In context
Inside a container
Dropped into a bordered panel or table
This folder is empty
Upload files or create a new document to get started.