Empty

An empty state takes the place of content that is not there, such as a list without entries or a search without results. Its title names what is missing, and its description explains why or tells users how to continue.

UsageCopy Anchor Link

import {
	Empty,
	EmptyDescription,
	EmptyHeader,
	EmptyTitle,
} from "@biem/ui/components/ui/empty";

export function EmptyDefault() {
	return (
		<Empty>
			<EmptyHeader>
				<EmptyTitle>No transfers yet</EmptyTitle>
				<EmptyDescription>
					Transfers between the warehouse and the store appear here as soon as the first one is sent.
				</EmptyDescription>
			</EmptyHeader>
		</Empty>
	);
}

ExamplesCopy Anchor Link

Default MediaCopy Anchor Link

A picture tells users at a glance which kind of content is missing, before they read a word. With variant left at "default", the media keeps the size the picture brings along, so an illustration can carry a view that has nothing else to show.

Icon MediaCopy Anchor Link

Where empty states recur across a product, such as a filter without matches or an archive without entries, a small sign should mark them without competing with the explanation. Set to "icon", variant gives every icon the same size and setting, so these empty states stay consistent and an icon needs no size of its own.

With ActionCopy Anchor Link

Many empty views have a remedy that users can apply themselves, such as adding a first entry or importing a list. Placed in EmptyContent, an action lets them take that step on the spot, so the empty state leads onward instead of ending the task.

API ReferenceCopy Anchor Link

EmptyCopy Anchor Link

Empty holds the header and the content and centers them in the area it fills. It renders a div and has no props of its own.

EmptyHeaderCopy Anchor Link

EmptyHeader groups the media, the title and the description. It renders a div and has no props of its own.

EmptyMediaCopy Anchor Link

EmptyTitleCopy Anchor Link

EmptyTitle names what is missing. It renders a div and has no props of its own.

EmptyDescriptionCopy Anchor Link

EmptyDescription explains why the content is missing or tells users how to continue. It renders a div and has no props of its own.

EmptyContentCopy Anchor Link

EmptyContent holds actions below the header and stacks them in a centered column. It renders a div and has no props of its own.