Floating Action Button
A floating button representing the primary page action.
Projects /
A floating button representing the primary page action.
All components are compatible with CodyFrame, Tailwind CSS or any other CSS framework.
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%).
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>
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>
Optionally, you can hide the FAB and show it only if a specific condition is met:
data-target-in
attribute and set it equal to a unique selector of the trigger element;data-offset-in
attribute and set it equal to the amount in pixels. This can be combined with the data-target-in
attribute;data-target-out
attribute and set it equal to a unique selector of the trigger element;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>
Create a CodyHouse account to unlock members-only features and join our community of web designers!