Astryx Design System

Empty State@astryxdesign/core v0.0.15 · EmptyState

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.

ts
import {EmptyState} from '@astryxdesign/core/EmptyState'

Best practices

Guidance	Practices
Do	Include a clear title and a call-to-action button so users know how to proceed.
Do	Use an illustration or icon that reinforces the context of the empty state.
Do	Use the compact variant inside cards or sidebars where space is limited.
Don't	Leave an empty state without guidance; always explain what happened and what the user can do next.
Don't	Use a generic message like "No data"; be specific about what is empty and why.
Don't	Use an EmptyState for error messages that require immediate action; use a Banner instead.

Examples

Common configurations, variations, and states.

EmptyState — Actions

Full empty state with icon, message, and action buttons. Use when a search returns no results, a filter clears all items, or a list has been emptied. The buttons give the user a way forward: go back, clear filters, or try a different query.

EmptyState — Compact

Smaller empty state with reduced spacing for constrained areas. Use inside sidebar panels, card widgets, or notification drawers where a full-size empty state would overwhelm the layout.

EmptyState — Container

Empty state wrapped in a Card for first-time setup or onboarding. Use when the user has not created any items yet, like a project list, team roster, or dashboard widget that will fill with data once they take action.