Floating Button

FabButton floating mode places the action surface at viewport level. Set floating to make the root control fixed in the viewport.

In React, Vue, and Svelte, floating mode automatically collapses sections into a menu toggle. The original sections array remains the source of the floating menu items.

<FabButton
  floating
  floatingPosition="bottom-right"
  floatingOffset="24px"
  floatingShape="default"
  floatingMenuLabel="Actions"
  sections={[
    { key: "compose", content: "Compose", onClick: () => {} },
    { key: "upload", content: "Upload", onClick: () => {} },
    { key: "share", content: "Share", onClick: () => {} }
  ]}
/>

Floating Position

floatingPosition maps to a 3x3 grid across the viewport. The default is bottom-right.

const positions = [
  "top-left",
  "top-center",
  "top-right",
  "center-left",
  "center",
  "center-right",
  "bottom-left",
  "bottom-center",
  "bottom-right"
] as const

Floating Offset

Use floatingOffset to control the distance from the viewport edge.

<FabButton
  floating
  floatingPosition="bottom-right"
  floatingOffset="24px"
  floatingMenuLabel="Actions"
  sections={[
    { key: "compose", content: "Compose" },
    { key: "share", content: "Share" }
  ]}
/>

The value accepts CSS lengths such as "24px" or "2rem".

Floating Shape

FabButton 1.7.0 adds floatingShape for the collapsed floating trigger. Use it when the floating button should have a different silhouette from the menu items.

<FabButton
  floating
  floatingShape="circle"
  floatingMenuLabel="+"
  floatingMenuAriaLabel="Actions"
  sections={[
    { key: "compose", content: "Compose" },
    { key: "upload", content: "Upload" }
  ]}
/>

Floating Menu Label

Use floatingMenuLabel to customize the collapsed trigger label. The default is "Actions". In 1.7.0, React and Vue can pass icon content, and Svelte can use symbol text for compact triggers.

<FabButton
  floating
  floatingMenuLabel="Create"
  sections={[
    { key: "compose", content: "Compose" },
    { key: "upload", content: "Upload" }
  ]}
/>

For icon-only triggers, pair the visual label with floatingMenuAriaLabel.

<FabButton
  floating
  floatingShape="circle"
  floatingMenuLabel={<i className="fa-solid fa-plus" aria-hidden="true" />}
  floatingMenuAriaLabel="Actions"
  sections={sections}
/>

<script setup lang="ts">
import { h } from "vue"
import { FabButton } from "@rezafab/fab-button/vue"
 
const triggerIcon = h("i", { class: "fa-solid fa-plus", "aria-hidden": "true" })
</script>
 
<template>
  <FabButton
    floating
    floatingShape="circle"
    :floatingMenuLabel="triggerIcon"
    floatingMenuAriaLabel="Actions"
    :sections="sections"
  />
</template>

<script lang="ts">
  import { FabButton } from "@rezafab/fab-button/svelte"
</script>
 
<FabButton
  floating
  floatingShape="circle"
  floatingMenuLabel="+"
  floatingMenuAriaLabel="Actions"
  {sections}
/>

Web Component Attribute

Use the floating-shape attribute with the Web Component adapter.

<fab-button
  floating
  floating-position="bottom-right"
  floating-offset="24px"
  floating-shape="circle"
  aria-label="Actions"
>
  <button data-section="compose">Compose</button>
  <button data-section="upload">Upload</button>
</fab-button>

Behavior Notes

• Escape closes the floating menu or attached panel.
• Clicking outside closes the floating menu or attached panel.
• sections remains the source of menu items.
• onClick can still be used with a section that also opens a panel.
• React, Vue, and Svelte automatically collapse floating sections into a toggle menu.
• Web Component currently supports floating positioning attributes, but not the built-in collapsible menu behavior.

Adapter Support