Skip to content
← Inventory

Empty

Empty state root container.

No materials match

Try widening your finish or colour filters.

Usage

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

Best practices

  • 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 EmptyHeaderEmptyMedia + EmptyTitle + EmptyDescription, and put the call-to-action in EmptyActions.

Props

Empty

PropTypeDefaultDescription
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

EmptyDescription

PropTypeDefaultDescription
asChildboolean

Merge props onto child

EmptyMedia

PropTypeDefaultDescription
childrenReact.ReactNode

Custom media content, such as an illustration or animated preview.

iconLucideIcon

Icon to display

plainboolean

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.

EmptyTitle

PropTypeDefaultDescription
asChildboolean

Merge props onto child

levelHeadingLevel"3"

Heading level for the document outline.

Also exports

  • componentEmptyActions
  • componentEmptyHeader

Composition