EmptyState shows a placeholder when a content area has no data. Use it for empty lists, zero search results, first-time setups, or cleared inboxes. Always include a title and a next step so the user is not stuck.
Preview loads on approachPreview loads on approach
Exact source · empty-state-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {EmptyState} from '@astryxdesign/core/EmptyState';
import {Button} from '@astryxdesign/core/Button';
import {Icon} from '@astryxdesign/core/Icon';
import {MagnifyingGlassIcon} from '@heroicons/react/24/outline';
export default function EmptyStateShowcase() {
return (
<EmptyState
icon={<Icon icon={MagnifyingGlassIcon} size="lg" />}
title="No results found"
description="Try adjusting your search or filters to find what you need."
actions={<Button label="Clear filters" variant="secondary" />}
/>
);
}
Usage
EmptyState shows a placeholder when a content area has no data. Use it for empty lists, zero search results, first-time setups, or cleared inboxes. Always include a title and a next step so the user is not stuck.
Include a clear title and a call-to-action button so users know how to proceed.
Use an illustration or icon that reinforces the context of the empty state.
Use the compact variant inside cards or sidebars where space is limited.
Leave an empty state without guidance; always explain what happened and what the user can do next.
Use a generic message like "No data"; be specific about what is empty and why.
Use an EmptyState for error messages that require immediate action; use a Banner instead.
Typed props
Prop
Type and behavior
title
string · required
Primary message rendered as an <h3> heading inside the empty state.
description
string
Optional secondary text providing additional context below the title.
icon
ReactNode
Optional icon or illustration displayed above the title; rendered as decorative (aria-hidden="true").
Controls only the rendered HTML heading tag (h1-h6) so the title fits the document outline. This is a semantic change for accessibility and does not change the visual size of the title, which stays fixed regardless of level.
isCompact
boolean · default false
Enables the compact variant with reduced spacing for constrained content areas.
xstyle
StyleXStyles
StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.
Anatomy
Icon · optional
A visual cue above the title that reinforces the context, like a search icon for no results.
Title · required
Primary message explaining what is empty: "No projects yet" not "No data".
Description · optional
Additional context explaining why it is empty or what the user can do.
Actions · optional
One or two buttons guiding the user to a next step, like "Create project" or "Clear filters".
