FabButton
DocumentationFabButton

Getting Started

Start with the adapter package that matches your frontend stack.

Install

pnpm add @rezafab/fab-button-react
pnpm add @rezafab/fab-button-vue
pnpm add @rezafab/fab-button-svelte
pnpm add @rezafab/fab-button-element

If you prefer one entry package with subpath imports, install:

pnpm add @rezafab/fab-button

React Quick Start

import { FabButton } from "@rezafab/fab-button-react"
import "@rezafab/fab-button-react/style.css"
 
export function Example() {
  return (
    <FabButton
      variant="primary"
      sections={[
        { key: "copy", content: "Copy" },
        { key: "share", content: "Share" },
        { key: "save", content: "Save" }
      ]}
    />
  )
}

Action Sections

When at least one section includes onClick, FabButton renders interactive section buttons automatically.

<FabButton
  sections={[
    { key: "copy", content: "Copy", onClick: () => console.log("copy") },
    { key: "share", content: "Share", onClick: () => console.log("share") }
  ]}
/>

Local Development

pnpm install
pnpm build
pnpm storybook

Need fast prototyping? Open Playground to tune props and generate React/Vue/Svelte/Element snippets instantly.