Go to Content
Design System
Playroom Storybook
#StandWithUkraine

FixedToBottom Beta

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.

FixedButton

FixedButton is a button fixed at the bottom of the page.

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.