Skip to content
Compositions

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 saves yet

Save materials as you browse and they’ll collect here.

Usage

import { EmptyState, EmptyStateProps } from "@instruments/materia-ui/compositions/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 where you place it - a full-page empty near an h2 wants level="3", but a nested one may need "4".

Props

PropTypeDefaultDescription
actionsReact.ReactNode

Actions rendered in EmptyActions. Wrap next/link via <Button render={<Link />}>.

descriptionReact.ReactNode

Supporting copy rendered in EmptyDescription.

iconLucideIcon

Icon shown above the title, via EmptyMedia. Ignored when media is set.

iconPlainboolean

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).

levelHeadingLevel"3"

Heading level passed to EmptyTitle, for the document outline.

mediaReact.ReactNode

Custom media (illustration / SwatchFan). Takes precedence over icon.

title(required)React.ReactNode

Heading text.

layoutEmptyLayout"centered"

Layout variant. card/card-dashed wrap the content in a Card; centered fills its parent up to minHeight.

minHeightstring"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