Standard duskmoon implemented 3 demos

BackTop

BackTop gives long pages a persistent return-to-top affordance.

Import @duskmoon-dev/components/back-top

1 API sections

3 documented props

1 behavior scenarios

Key API

visibilityHeighttarget

Usage

When to use

Use it when users need to move between sections, pages, steps, or contextual actions.
Expose current and disabled state so navigation remains clear to keyboard and screen-reader users.

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

Wayfinding

Covers the route, section, step, or action-list patterns that help users move through an interface.

Current state

Shows selected, active, open, or current props where the component exposes them.

Primary API surface

BackTop is most often configured through `visibilityHeight`, `target`.

Covered behavior

Becomes visible after target scroll and scrolls target to top

Feature Demos

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

Preview

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { BackTop } from "@duskmoon-dev/components/back-top";

export function Example() {
  return (<BackTop visibilityHeight={0}>Back to top</BackTop>);
}

Preview

Becomes visible after target scroll and scrolls target to top

test-backed

BackTop scenario from the component test coverage: becomes visible after target scroll and scrolls target to top.

Source

import "@duskmoon-dev/components/styles.css";
import { BackTop } from "@duskmoon-dev/components/back-top";

export function BackTopBecomesVisibleAfterTargetDemo() {
  return (<BackTop visibilityHeight={0}>Back to top</BackTop>);
}

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">
  <BackTop visibilityHeight={0}>Back to top</BackTop>
</div>

<div data-theme="moonlight">
  <BackTop visibilityHeight={0}>Back to top</BackTop>
</div>

API

The API reference below lists every parsed exported type or interface for BackTop. Start with `visibilityHeight`, `target` for common usage.

Types: packages/components/src/components/back-top/BackTop.types.ts Scenarios: packages/components/src/components/back-top/BackTop.test.tsx

BackTopProps interface extends Omit< ComponentProps<"button">, "children" >

Prop	Type	Required	Description
`visibilityHeight`	`number`	No	visibilityHeight configures BackTop.
`target`	`() => Window \| HTMLElement \| null`	No	target configures BackTop.
`children`	`ReactNode`	No	children configures BackTop.