Sticky "save" and "cancel" bar

[pamelahu]

I'm working on a settings page. I'm wondering if there's an existing pattern/component for "save" and "cancel" where the buttons are sticky/accessible anywhere on the page. I'm worried if the settings page is too long, users won't scroll down to hit a "save" at the very bottom.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

For your settings page, considering your concern about the length of the page and ensuring that "save" and "cancel" buttons are easily accessible, using a sticky footer or action bar could be a suitable solution. This approach keeps your action buttons visible and accessible regardless of the user's scroll position on the page.

In the context of Paste, while there isn't a specific component called "sticky footer," the concept of making elements like buttons sticky is acknowledged. For instance, the idea of a sticky command bar is mentioned, which aligns with your requirement. This pattern can ensure that your "save" and "cancel" buttons remain accessible to users, enhancing the usability of your settings page, especially when dealing with long forms or settings.

Here's a general approach to implementing sticky elements in CSS, which you can adapt for your "save" and "cancel" buttons:

.sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff; /* or any color/background you prefer */
  border-top: 1px solid #e5e5e5; /* optional */
  z-index: 1000; /* Ensure it's above other content */
}

And your HTML might look something like this:

<div class="sticky-footer">
  <button type="button">Cancel</button>
  <button type="button">Save</button>
</div>

Remember to adjust the main content's padding or margin at the bottom to ensure it's not hidden behind the sticky footer.

For more detailed guidelines and to ensure consistency with the Paste design system, it's recommended to refer to the Paste documentation for components that might be used in conjunction with sticky elements, such as Buttons. However, as of my last update, specific guidelines for sticky footers or action bars in the context of long pages were not explicitly detailed in the Paste documentation.

If implementing a sticky footer or action bar, consider accessibility and usability to ensure it enhances the user experience. Testing with users, including those who rely on keyboard navigation and screen readers, can provide valuable insights into the effectiveness of your implementation.

For more information and to stay updated with any new components or patterns that might be introduced, please visit the Paste documentation.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Sticky tabs and buttons and Scrollable table (updated: 06/23/2022, similarity score: 86%)
• Floating action bars/footers in Console (updated: 03/20/2024, similarity score: 85%)
• Save pattern in Console (updated: 09/20/2023, similarity score: 85%)

[serifluous]

Hey @pamelahu ! You can check out a response for this in #3817