Feedbackduskmoonimplemented7 demos

Empty

Empty explains an empty content state and gives the user a next step.

Import@duskmoon-dev/components/empty

2API sections

6documented props

5behavior scenarios

Key API

imageimageStyledescriptionPRESENTED_IMAGE_DEFAULTPRESENTED_IMAGE_SIMPLE

Usage

When to use

Use it to clarify state, metadata, content hierarchy, or loading without creating a new workflow.
Pair it with semantic content so visual treatment never becomes the only source of meaning.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Visual hierarchy

Focuses on status, metadata, empty/loading states, or content grouping without owning application state.

Theme integration

Uses DuskMoon tokens so the component follows the active docs theme.

Primary API surface

Empty is most often configured through `image`, `imageStyle`, `description`, `PRESENTED_IMAGE_DEFAULT`.

Covered behavior

Renders default empty state

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

No data

Basic usage

authored

Import the component stylesheet and Empty from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Empty } from "@duskmoon-dev/components/empty";

export function Example() {
  return (<Empty>DuskMoon Empty</Empty>);
}

Preview

No data

Renders default empty state

test-backed

Empty scenario from the component test coverage: renders default empty state.

Source

import "@duskmoon-dev/components/styles.css";
import { Empty } from "@duskmoon-dev/components/empty";

export function EmptyRendersDefaultEmptyStateDemo() {
  return (<Empty>DuskMoon Empty</Empty>);
}

Preview

No data

Renders custom description and children

test-backed

Empty scenario from the component test coverage: renders custom description and children.

Source

import "@duskmoon-dev/components/styles.css";
import { Empty } from "@duskmoon-dev/components/empty";

export function EmptyRendersCustomDescriptionAndDemo() {
  return (<Empty>DuskMoon Empty</Empty>);
}

Preview

No data

Hides description when description is false

test-backed

Empty scenario from the component test coverage: hides description when description is false.

Source

import "@duskmoon-dev/components/styles.css";
import { Empty } from "@duskmoon-dev/components/empty";

export function EmptyHidesDescriptionWhenDescriptionDemo() {
  return (<Empty>DuskMoon Empty</Empty>);
}

Preview

No data

Supports custom className and static image constants

test-backed

Empty scenario from the component test coverage: supports custom classname and static image constants.

Source

import "@duskmoon-dev/components/styles.css";
import { Empty } from "@duskmoon-dev/components/empty";

export function EmptySupportsCustomClassNameAndDemo() {
  return (<Empty>DuskMoon Empty</Empty>);
}

Preview

No data

Forwards root ref

test-backed

Empty scenario from the component test coverage: forwards root ref.

Source

import "@duskmoon-dev/components/styles.css";
import { Empty } from "@duskmoon-dev/components/empty";

export function EmptyForwardsRootRefDemo() {
  return (<Empty>DuskMoon Empty</Empty>);
}

Preview

Sunshine Theme

No data

Moonlight Theme

No data

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Empty>DuskMoon Empty</Empty>
</div>

<div data-theme="moonlight">
  <Empty>DuskMoon Empty</Empty>
</div>

API

The API reference below lists every parsed exported type or interface for Empty. Start with `image`, `imageStyle`, `description`, `PRESENTED_IMAGE_DEFAULT` for common usage.

Types: packages/components/src/components/empty/Empty.types.tsScenarios: packages/components/src/components/empty/Empty.test.tsx

EmptyPropsinterface extends Omit< ComponentProps<"div">, "children" | "title" >

Prop	Type	Required	Description
`image`	`ReactNode`	No	image configures Empty.
`imageStyle`	`React.CSSProperties`	No	imageStyle configures Empty.
`description`	`ReactNode \| false`	No	description configures Empty.
`children`	`ReactNode`	No	children configures Empty.

EmptyComponentinterface extends React.ForwardRefExoticComponent< EmptyProps & React.RefAttributes<HTMLDivElement> >

Prop	Type	Required	Description
`PRESENTED_IMAGE_DEFAULT`	`ReactNode`	Yes	PRESENTED_IMAGE_DEFAULT configures Empty.
`PRESENTED_IMAGE_SIMPLE`	`ReactNode`	Yes	PRESENTED_IMAGE_SIMPLE configures Empty.