Float Button

A circular button fixed to a corner of the viewport, for a persistent floating action. FloatButton.BackTop is a ready-made variant that scrolls the page back to the top.

import { FloatButton } from '@jbpark/ui-kit';

<FloatButton icon={<Settings />} aria-label="Settings" />
<FloatButton.BackTop />;

Scoped preview — normally fixed to the viewport corner

FloatButton is fixed-positioned by design, so the box above overrides it to absolute just to keep this preview contained. FloatButton.BackTop is rendered for real below (visibilityHeight={200}, lower than its default 450) — scroll this page down a bit and it appears in the actual bottom-right corner of your viewport; clicking it scrolls back to the top.

Props

FloatButton accepts the same props as Button (icon, loading, shape, color, etc.), plus fixed positioning/size/shape styling applied by default (all overridable via className).

FloatButton.BackTop additionally accepts:

Prop	Type	Default
`visibilityHeight`	`number`	`450`
`onClick`	`(e: MouseEvent<HTMLElement>) => void`	-

BackTop hides itself (display: none) until the page has scrolled past visibilityHeight.

Props​

Props