Layout

Affix and FloatButton

Keep a toolbar in view once it reaches the top, and float a button over the page.

Ant Design: Affix, FloatButton, FloatButton.BackTop

import { Affix, FloatButton, BackToTop } from '@alea/ui';

Examples

One frequent action, or a few that fan out.

The buttons float in this card's corner (position="absolute"); on a page they stay fixed to the screen.

Sticks once it reaches the top of the page; data-stuck lets you restyle it.

3 selected

Sticks to the top once it scrolls there, and tells you when (data-stuck for styling) (Ant's Affix).

Prop	Type	Default	Description
`className`	`string`	-	Extra class names for the root element.
`offsetTop`	`number`	`0`	Distance from the top while stuck, in px. Default 0.
`onChange`	`((stuck: boolean) => void)`	-	Called when it sticks or unsticks (to change its look).

A round button floating over the page for one frequent action, or a few (Ant's FloatButton).

Prop	Type	Default	Description
`aria-label`required	`string`	-	What it does; also the tooltip.
`icon`required	`ReactNode`	-	The icon.
`actions`	`{ icon: ReactNode; label: string; onPress: () => void; }[]`	-	Extra buttons that fan out above it on press.
`onPress`	`(() => void)`	-	Called when the main button is pressed (when there are no actions).
`placement`	`"bottom-end" \| "bottom-start"`	`'bottom-end'`	Corner it sits in. Default bottom-end.
`position`	`"fixed" \| "absolute"`	`'fixed'`	fixed to the viewport (default), or absolute inside a positioned parent.
`variant`	`"primary" \| "secondary"`	`'primary'`	primary: the dark gradient; secondary: the chip.

Prop	Type	Default	Description
`position`	`"fixed" \| "absolute"`	`'fixed'`	fixed to the window (default) or absolute inside a positioned parent.
`threshold`	`number`	`400`	Scroll distance before it shows, in px. Default 400.

Don't