FloatingArea

Basic usage

FloatingArea is an unstyled container which:

• Is positioned bottom right corner and floats on top of other content using position: fixed
• Disappears when user scrolls down (slides down)
• Re-appears when user scrolls up (slides in from bottom)
• Also appears if any element within is currently focused

<FloatingArea>
  This will float at bottom right corner, disappears when user scrolls down.
</FloatingArea>

Floating button

Floating area can be a nice place to have a "scroll to top" <Button>, for example.

<FloatingArea>
  <Button onClick={() => scrollTo({ top: 0, behavior: "smooth" })}>
    <Icon icon={faArrowUp} /> Scroll to top
  </Button>
</FloatingArea>

Also check out our Table of Contents example for another usage example.

No padding

You can remove the padding with the noPadding prop.

<FloatingArea noPadding />

Sandbox

You can apply a drop shadow using the .bf-shadow class, and a rounded button with the pill prop.