Standard duskmoon implemented 6 demos

FloatButton

FloatButton keeps a high-priority shortcut available over the page content.

Import @duskmoon-dev/components/float-button

11 API sections

24 documented props

4 behavior scenarios

Key API

icontypeshapetooltipdescriptionbadge

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

FloatButton is most often configured through `icon`, `type`, `shape`, `tooltip`.

Covered behavior

Renders icon, type, shape, description, tooltip, and badge

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 FloatButton from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { FloatButton } from "@duskmoon-dev/components/float-button";

export function Example() {
  return (<FloatButton type="primary" icon="+" tooltip="Create" />);
}

Preview

Renders icon, type, shape, description, tooltip, and badge

test-backed

FloatButton scenario from the component test coverage: renders icon, type, shape, description, tooltip, and badge.

Source

import "@duskmoon-dev/components/styles.css";
import { FloatButton } from "@duskmoon-dev/components/float-button";

export function FloatButtonRendersIconTypeShapeDemo() {
  return (<FloatButton type="primary" icon="+" tooltip="Create" />);
}

Preview

Supports links, disabled links, refs, and overflow badge count

test-backed

FloatButton scenario from the component test coverage: supports links, disabled links, refs, and overflow badge count.

Source

import "@duskmoon-dev/components/styles.css";
import { FloatButton } from "@duskmoon-dev/components/float-button";

export function FloatButtonSupportsLinksDisabledLinksDemo() {
  return (<FloatButton type="primary" icon="+" tooltip="Create" />);
}

Preview

Renders group with inherited shape and trigger state

test-backed

FloatButton scenario from the component test coverage: renders group with inherited shape and trigger state.

Source

import "@duskmoon-dev/components/styles.css";
import { FloatButton } from "@duskmoon-dev/components/float-button";

export function FloatButtonRendersGroupWithInheritedDemo() {
  return (<FloatButton type="primary" icon="+" tooltip="Create" />);
}

Preview

Back top becomes visible and scrolls target

test-backed

FloatButton scenario from the component test coverage: back top becomes visible and scrolls target.

Source

import "@duskmoon-dev/components/styles.css";
import { FloatButton } from "@duskmoon-dev/components/float-button";

export function FloatButtonBackTopBecomesVisibleDemo() {
  return (<FloatButton type="primary" icon="+" tooltip="Create" />);
}

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">
  <FloatButton type="primary" icon="+" tooltip="Create" />
</div>

<div data-theme="moonlight">
  <FloatButton type="primary" icon="+" tooltip="Create" />
</div>

API

The API reference below lists every parsed exported type or interface for FloatButton. Start with `icon`, `type`, `shape`, `tooltip` for common usage.

Types: packages/components/src/components/float-button/FloatButton.types.ts Scenarios: packages/components/src/components/float-button/FloatButton.test.tsx

FloatButtonProps interface extends Omit< ComponentPropsWithoutRef<"button">, "children" | "onClick" | "type" >

Prop	Type	Required	Description
`icon`	`ReactNode`	No	icon configures FloatButton.
`type`	`FloatButtonType`	No	type configures FloatButton.
`shape`	`FloatButtonShape`	No	shape configures FloatButton.
`tooltip`	`FloatButtonTooltip`	No	tooltip configures FloatButton.
`description`	`ReactNode`	No	description configures FloatButton.
`badge`	`FloatButtonBadge`	No	badge configures FloatButton.
`href`	`string`	No	href configures FloatButton.
`target`	`string`	No	target configures FloatButton.
`children`	`ReactNode`	No	children configures FloatButton.
`onClick`	`MouseEventHandler<HTMLElement>`	No	onClick configures FloatButton.

FloatButtonTooltipConfig interface

Prop	Type	Required	Description
`title`	`ReactNode`	No	title configures FloatButton.
`placement`	`FloatButtonTooltipPlacement`	No	placement configures FloatButton.

FloatButtonBadge interface

Prop	Type	Required	Description
`count`	`ReactNode`	No	count configures FloatButton.
`dot`	`boolean`	No	dot configures FloatButton.
`color`	`string`	No	color configures FloatButton.
`overflowCount`	`number`	No	overflowCount configures FloatButton.

FloatButtonGroupProps interface extends Omit< ComponentPropsWithoutRef<"div">, "onClick" >

Prop	Type	Required	Description
`shape`	`FloatButtonShape`	No	shape configures FloatButton.
`trigger`	`FloatButtonGroupTrigger`	No	trigger configures FloatButton.
`open`	`boolean`	No	open configures FloatButton.
`closeIcon`	`ReactNode`	No	closeIcon configures FloatButton.
`children`	`ReactNode`	No	children configures FloatButton.
`onClick`	`MouseEventHandler<HTMLElement>`	No	onClick configures FloatButton.

FloatButtonBackTopProps interface extends Omit< FloatButtonProps, "href" | "target" >

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

FloatButtonType type

"default" | "primary"

FloatButtonShape type

"circle" | "square"

FloatButtonGroupTrigger type

"click" | "hover"

FloatButtonTooltipPlacement type

"top" | "bottom" | "left" | "right"

FloatButtonTooltip type

ReactNode | FloatButtonTooltipConfig

FloatButtonComponent type

ForwardRefExoticComponent< FloatButtonProps & RefAttributes<HTMLButtonElement | HTMLAnchorElement> > & { Group: ForwardRefExoticComponent< FloatButtonGroupProps & RefAttributes<HTMLDivElement> >