Empty State

A centered placeholder for empty lists and no-results screens, with icon, title, description and action.

A centered "nothing here" placeholder for empty lists, no-results screens, and zero-data states. It stacks an optional icon, a required title, an optional description, and an optional action slot (e.g. a primary button) so the user knows what to do next.

Import

import { EmptyState } from "@yuhuanowo/yunui";

Basic

Empty list

No messages

When you receive messages they'll show up here.

With an action

With a button

No results

Try a different search term or clear your filters.

Props

Prop	Type	Default	Description
action	ReactNode	—	Action slot (e.g. a primary button) below the text.
description	string	—	Supporting text below the title.
icon	ReactNode	—	Icon/illustration shown above the title.
title*	string	—	Heading text.