FixedToBottom Beta React-only

Open in Storybook

Some components float on top of content in a position fixed to the bottom of the page. The components in this article need to be placed within slots of FixedToBottom component, which takes care of their positioning.

FixedToBottom can take up the width of FullPage and FocusPage content.

HINT See Playroom example of a page with fully loaded up FixedToBottom.

Rules For Developers

When using with FullPage or FocusPage, FixedToBottom should be put in fixedToBottom slot of the page component.
FixedToBottom takes up the width of the parent container. It can be offset using leftOffset prop, but this shouldn’t be necessary when used inside page components.
By default FixedToBottom reserves space for itself in place where it is put. This means that when it is put at the end of the content and the user scrolls to the very bottom, FixedToBottom doesn’t cover any content. This behaviour can be overriden using the reserveSpaceInLayout prop.

FixedButton

FixedButton is a button fixed at the bottom of the page. It is centered inside FixedToBottom.

HINT Since a fixed demo wouldn’t render within the docs properly, please see the FixedButton example in Playroom.

Back to Top

Open in Figma

This variant of the FixedButton helps the user to get back to the top of the page.

The button should be initially hidden and it should appear once the user scrolls the page. After the user gets back to the top of the page, it should disappear again.

Rules For Developers

Place the FixedButton into backToTopButton slot of FixedToBottom component.
Set href to the target fragment.
Set scroll-behavior: smooth; on the scrollable content.
Use show prop to control the visibility of the button.

FixedFilter

FixedFilter is a component with a summary of transactions.

HINT Please see the FixedFilter example in Playroom.

Rules For Developers

Place the FixedFilter into body slot of FixedToBottom component.
Follow the example to fill its slots.
Only the info Button, the MenuDropdown toggle and the primary Button should remain on XL and below. On those tiers the rest of the actions needs to go into the MenuDropdown.