Empty

Empty state root container.

Try widening your finish or colour filters.

Usage

import { Empty, EmptyActions, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@instruments/materia-ui/components/empty";

Use Empty for "no data / nothing here"; a failure the user can retry is an ErrorState (which composes Empty), so don't hand-roll a retry empty.
Compose EmptyHeader › EmptyMedia + EmptyTitle + EmptyDescription, and put the call-to-action in EmptyActions.

Prop	Type	Default	Description
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`

Prop	Type	Description
children	`React.ReactNode`	Custom media content, such as an illustration or animated preview.
icon	`LucideIcon`	Icon to display
plain	`boolean`	Render the icon bare (no rounded IconBox surface), per Figma's empty/error states. The icon is tinted by `variant`.
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl" \| null \| undefined`	Override the icon size
tone	`"neutral" \| "brand" \| "danger" \| "warning" \| "success" \| "info" \| null \| undefined`	Semantic surface tone for the IconBox (also tints the bare icon when `plain`). Defaults to `neutral`, which renders the muted surface via the fixed `emphasis="soft"` treatment.

Prop	Type	Default	Description
level	`HeadingLevel`	`"3"`	Heading level for the document outline.

Builds on

Used by