Standard duskmoon implemented 7 demos

Result

Result summarizes the outcome of a completed workflow.

Import @duskmoon-dev/components/result

3 API sections

5 documented props

5 behavior scenarios

Key API

statustitlesubTitleiconextra

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

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

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

Theme The 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

Result is most often configured through `status`, `title`, `subTitle`, `icon`.

Covered behavior

Renders info result by default

Feature Demos

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

Preview

DuskMoon

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { Result } from "@duskmoon-dev/components/result";

export function Example() {
  return (<Result
  title="DuskMoon"
  status="success"
>
  DuskMoon Result
</Result>);
}

Preview

DuskMoon

Renders info result by default

test-backed

Result scenario from the component test coverage: renders info result by default.

Source

import "@duskmoon-dev/components/styles.css";
import { Result } from "@duskmoon-dev/components/result";

export function ResultRendersInfoResultByDemo() {
  return (<Result
  // Renders info result by default
  title="DuskMoon"
  status="success"
>
  DuskMoon Result
</Result>);
}

Preview

DuskMoon

Renders supported semantic statuses

test-backed

Result scenario from the component test coverage: renders supported semantic statuses.

Source

import "@duskmoon-dev/components/styles.css";
import { Result } from "@duskmoon-dev/components/result";

export function ResultRendersSupportedSemanticStatusesDemo() {
  return (<Result
  // Renders supported semantic statuses
  title="DuskMoon"
  status="success"
>
  DuskMoon Result
</Result>);
}

Preview

DuskMoon

Normalizes numeric exception statuses

test-backed

Result scenario from the component test coverage: normalizes numeric exception statuses.

Source

import "@duskmoon-dev/components/styles.css";
import { Result } from "@duskmoon-dev/components/result";

export function ResultNormalizesNumericExceptionStatusesDemo() {
  return (<Result
  // Normalizes numeric exception statuses
  title="DuskMoon"
  status="success"
>
  DuskMoon Result
</Result>);
}

Preview

DuskMoon

Renders title subtitle extra and custom icon

test-backed

Result scenario from the component test coverage: renders title subtitle extra and custom icon.

Source

import "@duskmoon-dev/components/styles.css";
import { Result } from "@duskmoon-dev/components/result";

export function ResultRendersTitleSubtitleExtraDemo() {
  return (<Result
  // Renders title subtitle extra and custom icon
  title="DuskMoon"
  status="success"
>
  DuskMoon Result
</Result>);
}

Preview

DuskMoon

Supports native div props, custom className, and forwarded ref

test-backed

Result scenario from the component test coverage: supports native div props, custom classname, and forwarded ref.

Source

import "@duskmoon-dev/components/styles.css";
import { Result } from "@duskmoon-dev/components/result";

export function ResultSupportsNativeDivPropsDemo() {
  return (<Result
  // Supports native div props, custom className, and forwarded ref
  title="DuskMoon"
  status="success"
>
  DuskMoon Result
</Result>);
}

Preview

Sunshine Theme

DuskMoon

Moonlight Theme

DuskMoon

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">
  <Result
  title="DuskMoon"
  status="success"
>
  DuskMoon Result
</Result>
</div>

<div data-theme="moonlight">
  <Result
  title="DuskMoon"
  status="success"
>
  DuskMoon Result
</Result>
</div>

API

The API reference below lists every parsed exported type or interface for Result. Start with `status`, `title`, `subTitle`, `icon` for common usage.

Types: packages/components/src/components/result/Result.types.ts Scenarios: packages/components/src/components/result/Result.test.tsx

ResultProps interface extends Omit<ComponentProps<"div">, "title">

Prop	Type	Required	Description
`status`	`ResultStatus`	No	status configures Result.
`title`	`ReactNode`	No	title configures Result.
`subTitle`	`ReactNode`	No	subTitle configures Result.
`icon`	`ReactNode`	No	icon configures Result.
`extra`	`ReactNode`	No	extra configures Result.

ResultNormalizedStatus type

| "success" | "error" | "info" | "warning" | "404" | "403" | "500"

ResultStatus type

ResultNormalizedStatus | 404 | 403 | 500