Bifrost Design System

FloatingArea

import FloatingArea from "@intility/bifrost-react/FloatingArea";

FloatingArea

Props

Basic usage

FloatingArea is an unstyled container that:

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 an excellent 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.

Open Sandbox

import FloatingArea from "@intility/bifrost-react/FloatingArea";
import Button from "@intility/bifrost-react/Button";

export default function FloatingAreaDemo() {
  return (
    <div className="bf-page-padding bf-content">
      <FloatingArea>
        <Button pill className="bf-shadow">
          I'm floating!
        </Button>
      </FloatingArea>
      <h4>Scroll downwards to hide floating area</h4>
      <p>
        Lorem ipsum dolor sit amet. Eos Quis laudantium 33 consequatur dicta eum
        expedita dolore aut nostrum nihil. Est dolorem consequuntur et accusamus
        fuga et repellendus facilis et incidunt explicabo. 33 galisum sapiente
        non provident itaque et itaque dolores non maiores doloribus a suscipit
        eveniet! 33 illum labore id veniam sint cum deserunt omnis est deserunt
        facere et eaque exercitationem et pariatur velit?
      </p>
      <p>
        Qui minima doloribus ut dolore iure qui debitis voluptatibus aut dolore
        nostrum hic consequatur. Sed consequatur nemo qui ipsum enim et velit
        architecto sit perferendis repellendus.
      </p>
      <p>
        Sed deserunt voluptatum et voluptate voluptatem aut labore reprehenderit
        vel corporis sapiente. 33 omnis magnam et ratione saepe aut dicta
        veritatis rem voluptatem necessitatibus aut voluptates autem est sunt
        delectus aut commodi doloribus.
      </p>
      <p>
        Lorem ipsum dolor sit amet. Eos Quis laudantium 33 consequatur dicta eum
        expedita dolore aut nostrum nihil. Est dolorem consequuntur et accusamus
        fuga et repellendus facilis et incidunt explicabo. 33 galisum sapiente
        non provident itaque et itaque dolores non maiores doloribus a suscipit
        eveniet! 33 illum labore id veniam sint cum deserunt omnis est deserunt
        facere et eaque exercitationem et pariatur velit?
      </p>
      <h4>Scroll upwards to reveal floating area</h4>
      <p>
        Qui minima doloribus ut dolore iure qui debitis voluptatibus aut dolore
        nostrum hic consequatur. Sed consequatur nemo qui ipsum enim et velit
        architecto sit perferendis repellendus.
      </p>
      <p>
        Sed deserunt voluptatum et voluptate voluptatem aut labore reprehenderit
        vel corporis sapiente. 33 omnis magnam et ratione saepe aut dicta
        veritatis rem voluptatem necessitatibus aut voluptates autem est sunt
        delectus aut commodi doloribus.
      </p>
    </div>
  );
}