Features

Floating Button Mode

Use floating to place FabButton as a fixed viewport action surface. React, Vue, and Svelte automatically collapse floating sections into a menu toggle.

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

floatingPosition supports top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, and bottom-right.

Attached Section Panels

Sections can define an attached panel that opens from the floating action surface.

<FabButton
  floating
  floatingMenuLabel="Actions"
  sections={[
    {
      key: "settings",
      content: "Settings",
      panelTitle: "Settings",
      panel: ({ close }) => (
        <div>
          <button type="button" onClick={close}>Close</button>
        </div>
      )
    }
  ]}
/>

Panel sections support panel, panelTitle, panelClassName, panelStyle, and panelAriaLabel.

Built-in Section Confirmation

Use confirm on a section to require confirmation before onClick executes.

<FabButton
  sections={[
    { key: "archive", content: "Archive", onClick: () => console.log("archive") },
    {
      key: "delete",
      content: "Delete",
      confirm: {
        title: "Delete this item?",
        description: "This action cannot be undone."
      },
      onClick: () => console.log("delete")
    }
  ]}
/>

Web Component supports the same via attributes: data-confirm, data-confirm-title, and data-confirm-description.

Per-Section Async State

Each section supports idle, loading, success, and error.

<FabButton
  sections={[
    {
      key: "save",
      content: "Save",
      onClick: async () => {
        await new Promise((resolve) => setTimeout(resolve, 900))
      }
    },
    {
      key: "publish",
      content: "Publish",
      onClick: async () => {
        await new Promise((_, reject) => setTimeout(() => reject(new Error("Failed")), 900))
      }
    },
    { key: "sync", content: "Sync", asyncState: "loading" }
  ]}
/>

• Promise auto mode: React/Vue/Svelte
• Manual mode: all adapters
• Optional reset timing per section: asyncFeedbackDuration

Responsive Overflow Mode

Keep button groups compact on smaller screens.

<FabButton
  overflowMode="more"
  overflowBreakpoint={768}
  overflowVisibleCount={2}
  overflowMenuLabel="More"
  sections={[
    { key: "copy", content: "Copy", onClick: () => {} },
    { key: "share", content: "Share", onClick: () => {} },
    { key: "save", content: "Save", onClick: () => {} },
    { key: "archive", content: "Archive", onClick: () => {} }
  ]}
/>

Split Button Preset

Use one primary action + dropdown actions.

<FabButton
  actionPreset="split"
  splitButtonTriggerSide="right"
  sections={[
    { key: "save", content: "Save", onClick: () => {} },
    { key: "publish", content: "Publish", onClick: () => {} },
    { key: "archive", content: "Archive", onClick: () => {} }
  ]}
/>

Role and Permission Helpers

Use visibleWhen and disabledWhen to keep logic close to each section.

import { FabButton, disabledWhen, visibleWhen } from "@rezafab/fab-button-react"
 
<FabButton
  sections={[
    {
      key: "staff",
      content: "Staff Approve",
      ...visibleWhen(true),
      ...disabledWhen(false),
      onClick: () => {}
    }
  ]}
/>

Toolbar Keyboard Navigation

Use toolbar mode when sections behave like related commands. Arrow-key navigation can be horizontal, vertical, or both.

<FabButton
  keyboardNavigation="toolbar"
  keyboardOrientation="horizontal"
  loopNavigation
  sections={[
    { key: "copy", content: "Copy", onClick: copy, ariaLabel: "Copy item" },
    { key: "share", content: "Share", onClick: share, ariaLabel: "Share item" },
    { key: "save", content: "Save", onClick: save, ariaLabel: "Save item" }
  ]}
/>

Shortcut Metadata

Sections accept direct shortcuts with shortcut and keyboard-code IDs with shortcutId. FabButton renders shortcut hints and can trigger section actions from supported keyboard events.

<FabButton
  keyboardNavigation="toolbar"
  sections={[
    { key: "copy", shortcut: "1", content: "Copy", onClick: copy },
    { key: "share", shortcutId: 16, content: "Share", onClick: share },
    { key: "save", shortcutId: 17, content: "Save", onClick: save }
  ]}
/>

Action Analytics

Use onSectionAction to track what section ran and how it was triggered.

<FabButton
  keyboardNavigation="toolbar"
  sections={[
    { key: "copy", shortcut: "1", content: "Copy", onClick: copy },
    { key: "share", shortcutId: 16, content: "Share", onClick: share },
    { key: "save", content: "Save", onClick: save }
  ]}
  onSectionAction={(meta) => {
    console.log(meta.key, meta.source)
  }}
/>

meta.source can identify activation from a click, shortcut, or keyboard navigation.

Layout Modes

FabButton supports both flex and grid layouts. Grid is useful for compact command pads.

<FabButton
  layout="grid"
  columns="repeat(2, minmax(84px, 1fr))"
  rows="repeat(2, minmax(42px, auto))"
  gap="6px"
  sections={[
    { key: "up", content: "Up", onClick: moveUp },
    { key: "left", content: "Left", onClick: moveLeft },
    { key: "right", content: "Right", onClick: moveRight },
    { key: "down", content: "Down", onClick: moveDown }
  ]}
/>

Whole-Button States

Use disabled to block interaction for every section, or loading to represent a whole-control pending state.

<FabButton disabled sections={[{ key: "label", content: "Disabled" }]} />
 
<FabButton loading sections={[{ key: "label", content: "Submit" }]} />