Dm DuskMoon React
Standard duskmoon implemented 8 demos

Alert

Alert communicates important inline status, validation, or operational messages without interrupting the current workflow.

Import @duskmoon-dev/components/alert
3 API sections
2 documented props
5 behavior scenarios
Key API
colorappearance

Usage

When to use

  • Use it immediately after user actions or system checks that need visible confirmation.
  • Choose the least interruptive feedback surface that still makes the state clear.

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

User feedback

Covers transient, inline, or blocking feedback patterns for user actions and system status.

Action recovery

Shows how the component keeps next actions visible after success, warning, or failure states.

Primary API surface

Alert is most often configured through `color`, `appearance`.

Covered behavior

Renders children correctly

Feature Demos

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

Preview

filled

outline

tonal

Colors

authored

Alert supports the full semantic color palette: primary, secondary, tertiary, accent, neutral, base, info, success, warning, error.

Source
import "@duskmoon-dev/components/styles.css";
import { Alert } from "@duskmoon-dev/components/alert";

const colors = [
  "primary",
  "secondary",
  "tertiary",
  "accent",
  "neutral",
  "base",
  "info",
  "success",
  "warning",
  "error"
] as const;

export function AlertColorsDemo() {
  return (<div style={{ display: "grid", gap: 12 }}>
  {(["filled", "outline", "tonal"] as const).map((appearance) => (
    <section key={appearance} style={{ display: "grid", gap: 8 }}>
      {colors.map((color) => (
        <Alert key={color} color={color} appearance={appearance}>
          {color} alert
        </Alert>
      ))}
    </section>
  ))}
</div>);
}
Preview

Basic usage

authored

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

Source
import "@duskmoon-dev/components/styles.css";
import { Alert } from "@duskmoon-dev/components/alert";

export function Example() {
  return (<Alert color="success" appearance="tonal">
  Release checks passed.
</Alert>);
}
Preview

Renders children correctly

test-backed

Alert scenario from the component test coverage: renders children correctly.

Source
import "@duskmoon-dev/components/styles.css";
import { Alert } from "@duskmoon-dev/components/alert";

export function AlertRendersChildrenCorrectlyDemo() {
  return (<Alert color="success" appearance="tonal">
  Release checks passed.
</Alert>);
}
Preview

Applies default classes

test-backed

Alert scenario from the component test coverage: applies default classes.

Source
import "@duskmoon-dev/components/styles.css";
import { Alert } from "@duskmoon-dev/components/alert";

export function AlertAppliesDefaultClassesDemo() {
  return (<Alert color="success" appearance="tonal">
  Release checks passed.
</Alert>);
}
Preview

filled

outline

tonal

Applies color and appearance classes

test-backed

Alert scenario from the component test coverage: applies color and appearance classes.

Source
import "@duskmoon-dev/components/styles.css";
import { Alert } from "@duskmoon-dev/components/alert";

export function AlertAppliesColorAndAppearanceDemo() {
  return (<Alert color="success" appearance="tonal">
  Release checks passed.
</Alert>);
}
Preview

Maps tonal appearance to the base container style

test-backed

Alert scenario from the component test coverage: maps tonal appearance to the base container style.

Source
import "@duskmoon-dev/components/styles.css";
import { Alert } from "@duskmoon-dev/components/alert";

export function AlertMapsTonalAppearanceToDemo() {
  return (<Alert color="success" appearance="tonal">
  Release checks passed.
</Alert>);
}
Preview

Applies custom className

test-backed

Alert scenario from the component test coverage: applies custom classname.

Source
import "@duskmoon-dev/components/styles.css";
import { Alert } from "@duskmoon-dev/components/alert";

export function AlertAppliesCustomClassNameDemo() {
  return (<Alert color="success" appearance="tonal">
  Release checks passed.
</Alert>);
}
Preview
Sunshine Theme
Moonlight Theme

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">
  <Alert color="success" appearance="tonal">
  Release checks passed.
</Alert>
</div>

<div data-theme="moonlight">
  <Alert color="success" appearance="tonal">
  Release checks passed.
</Alert>
</div>

API

The API reference below lists every parsed exported type or interface for Alert. Start with `color`, `appearance` for common usage.

Types: packages/components/src/components/alert/Alert.types.ts Scenarios: packages/components/src/components/alert/Alert.test.tsx
AlertProps interface extends ComponentProps<"div">
Prop Type Required Description
color AlertColor No color configures Alert.
appearance AlertAppearance No appearance configures Alert.
AlertColor type 
| "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error"
AlertAppearance type 
"filled" | "outline" | "tonal"