Floating Button

FabButton 1.6.0 adds floating mode for viewport-level actions. 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"
  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 Menu Label

Use floatingMenuLabel to customize the collapsed trigger label. The default is "Actions".

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

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