EmptyState

Generic empty state, composed on Empty. Replaces the per-feature "nothing here" implementations with one flat-props preset: an icon (or custom media), a title, optional description, and optional actions.

No saved materials yet

Materials you save collect here for quick comparison later.

Usage

import { EmptyState, EmptyStateProps } from "@desk/ui/components/empty-state";

Best practices

Use EmptyState for "no data / nothing here"; a failure the user can retry is an ErrorState (which also composes Empty), so don't hand-roll a retry empty.
Set level to keep the document outline gapless at each migration site — a full-page empty near an h2 wants level="3", but a nested one may need "4".

Props

Prop	Type	Default	Description
actions	`React.ReactNode`		Actions rendered in `EmptyActions`. Wrap `next/link` via `<Button asChild>`.
description	`React.ReactNode`		Supporting copy rendered in `EmptyDescription`.
icon	`LucideIcon`		Icon shown above the title, via `EmptyMedia`. Ignored when `media` is set.
iconPlain	`boolean`		Render the icon bare, without the rounded `IconBox` surface.
iconTone	`"neutral" \| "brand" \| "danger" \| "warning" \| "success" \| "info" \| null \| undefined`		Icon box surface tone (also tints the bare icon when `iconPlain`).
level	`HeadingLevel`	`"3"`	Heading level passed to `EmptyTitle`, for the document outline.
media	`React.ReactNode`		Custom media (illustration / `CardFan`). Takes precedence over `icon`.
title(required)	`React.ReactNode`		Heading text.
layout	`EmptyLayout`	`"centered"`	Layout variant. `card`/`card-dashed` wrap the content in a Card; `centered` fills its parent up to `minHeight`.
minHeight	`string`	`"min-h-[50vh]"`	Tailwind min-height class applied only in the `centered` layout.
size	`"base" \| "sm" \| "lg" \| null \| undefined`

Also exports

interfaceEmptyStateProps

Composition

Builds on

Empty