Skip to content

Floating Action Button

Useful for providing a persistent action in the bottom right corner of the viewport to (ie Back to Top).

Table of Contents

  1. Anatomy
  2. Usage Guidelines
  3. Accessibility
  4. WordPress
  5. Specifications
    1. Properties
  6. Changelog
  7. Related
    1. Contains
  8. Examples

Anatomy

  1. Main Content Slot
  2. Icon

Usage Guidelines

Useful for providing a persistent action in the bottom right corner of the viewport. On mobile, it will adjust space to account for the sticky-cta.

This button is set to a fixed size, so be aware that space is very limited. It may be better to select an easy-to-recognize icon and use an invisible aria-label instead for screen readers.

Accessibility

Make sure the screen reader text is an accurate description of what will happen when interacting with this control, using aria-label if there is not enough room to write out a proper label.

WordPress

This component is inserted automatically into single article pages as a "back to top" button.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
elstring HTML element used as the container. If an href attribute is supplied, this defaults to a instead of buttonNo"button"
slotstring Inner HTML contentNo-
iconstring fontawesome icon nameYes"solid\/edit"

Changelog

1.35.0 (2022-06-30)

  • fix: auto-adjust space based on sticky-cta (2bd876f)

1.34.0

  • floating-action-button added

Contains

Other core components embedded within this template.

Examples

Default

Back to Top 
<x-floating-action-button class="u-hide-up--xxl" href="#hello" icon="solid/angle-up">Back to Top</x-floating-action-button>