Playground

Use this page to build full FabButton configurations visually, including:

split button preset
floating button mode
3x3 floating positioning
attached section panels
responsive overflow menu
toolbar keyboard navigation
shortcut hints
section confirmation
per-section async feedback
loading and disabled states
grid layout
unstyled/class-based mode
action analytics

The preview is rendered with the React adapter. Generated snippets are available for React, Vue, Svelte, and Web Component usage.

import { FabButton } from "@rezafab/fab-button/react"
import "@rezafab/fab-button/react/style.css"

export function Example() {
  return (
    <FabButton
      variant="primary"
      gap="6px"
      keyboardNavigation="toolbar"
      loopNavigation
      actionPreset="split"
      splitButtonMenuLabel="▾"
      sections={[
        { key: "save", content: "Save", ariaLabel: "Save action", onClick: () => console.log("save") },
        { key: "publish", content: "Publish", ariaLabel: "Publish action", onClick: () => console.log("publish") },
        { key: "archive", content: "Archive", ariaLabel: "Archive action", onClick: () => console.log("archive") },
        { key: "delete", content: "Delete", ariaLabel: "Delete action", onClick: () => console.log("delete") }
      ]}
    />
  )
}