Beacon UI

Sticky Footer ​

Overview ​

The Sticky Footer provides a persistent action area anchored to the bottom of the viewport. It is primarily used on long or scroll-heavy pages to surface save-related actions without requiring users to scroll to the end of the page.

The Sticky Footer should typically appear only when there are unsaved changes, helping users clearly understand when action is required and providing an easy way to save, cancel, or revert changes.

Guidelines ​

Dos ​

  • Use the Sticky Footer on long pages or complex forms where primary actions would otherwise be out of view.
  • Display the Sticky Footer only when there are changes to save.
  • Use the Sticky Footer to anchor Save, Cancel, or Revert actions.
  • Keep messaging concise and action-oriented.
  • Use standard button hierarchy to communicate primary vs secondary actions.

Don’ts ​

  • Don’t display the Sticky Footer persistently when no action is required.
  • Don’t use the Sticky Footer for non-critical or decorative actions.
  • Don’t overcrowd the Sticky Footer with too many buttons.
  • Don’t use it as a replacement for primary page navigation.
  • Don’t duplicate primary actions elsewhere on the page while the Sticky Footer is active.

Visibility ​

The Sticky Footer is hidden by default.

  • Add the show CSS class to make the Sticky Footer visible.
  • Toggle visibility dynamically based on change detection.
  • Hide the Sticky Footer immediately after changes are saved or reverted.

Content structure ​

The Sticky Footer typically contains:

  • Text A short message describing the pending action (e.g., “Save changes”).

  • Button container One primary action (e.g., Save) and one or more secondary actions (e.g., Cancel).

Button usage ​

  • Use a Success button for the save action.
  • Use a Link button for cancel or revert actions.
  • Keep button labels short and clear (1–2 words).
  • Buttons inside the Sticky Footer should follow standard button guidelines.

Behavior ​

  • The Sticky Footer remains fixed to the bottom of the viewport while visible.
  • It should not obscure important page content.
  • When present, it becomes the primary call-to-action area for the page.