Floating Action Button

A floating button representing the primary page action.

Dependencies

All components are compatible with CodyFrame, Tailwind CSS or any other CSS framework.

How to

The Floating Action Button component is used to display a fixed-positioned button that triggers the main page action.

The tooltip element is fully customizable: you can use it to include, for example, a navigation. The component will auto-change the size of the tooltip: it will morph from the size of the button to the size determined by its content. Only the final tooltip width is set updating the --fab-popover-width variable (past the @xs breakpoint; before it, the width is 100%). 

Button Position #

The FAB component can be placed in one of the 4 corners adding one of the following class variations:

• .fab--bottom-right
• .fab--bottom-left
• .fab--top-right
• .fab--top-left

The vertical gap (distance between the button and the top/bottom of the viewport) is determined by the --fab-gap-y variable; the distance from the left/right of the viewport depends on the max-width utility class applied to the .container: 

<div class="fab fab--bottom-right js-fab"> <!-- 👈 -->
  <div class="position-relative container max-width-sm height-100%"> <!-- 👈 -->
    <button class="reset fab__btn js-tab-focus js-fab__btn" aria-label="Toggle popover">
      <!-- ... -->
    </button>
  </div>
</div>

Button Icons #

When the button is clicked, it triggers the icon transition. To change the icons, replace the two SVG .fab__icon elements (you can use inline SVG, SVG symbols, or icon fonts).

<button class="reset fab__btn js-tab-focus js-fab__btn">
  <span class="fab__icon-wrapper">
    <svg class="icon fab__icon" viewBox="0 0 24 24">
      <!-- ... -->
    </svg>
  </span>

  <span class="fab__icon-wrapper">
    <svg class="icon fab__icon" viewBox="0 0 24 24">
      <!-- ... -->
    </svg>
  </span>
</button>

Visibility Offset #

Optionally, you can hide the FAB and show it only if a specific condition is met:

• show the banner when a specific element leaves the viewport: add the data-target-in attribute and set it equal to a unique selector of the trigger element;
• show the banner after the window has scrolled of a specific amount of pixels: add the data-offset-in attribute and set it equal to the amount in pixels. This can be combined with the data-target-in attribute;
• hide the banner when a specific element enters the viewport: add the data-target-out attribute and set it equal to a unique selector of the trigger element;
• hide the banner after the window has scrolled of a specific amount of pixels: add the data-offset-out attribute and set it equal to the amount in pixels. This can be combined with the data-target-out attribute.

<div class="fab fab--bottom-right js-fab" data-offset-in="200">
  <!-- ... -->
</div>

Categories

• Navigation > Misc
• Controls
• Overlays

Bug Report & Feedback

Component Github page ↗