Skip to content

Latest on the changelog, Oct 8, 2026: “Pages carry their content without JavaScript, and each deploy pings IndexNow”

OTF Kit logoOTF Kit

Floating Action Button

Input

Anchored floating action button with optional expanding actions menu.

View in Storybook
Floating Action Button
Loading Storybook preview…

Installation

bun add @otfdashkit/ui

Usage

Import Floating Action Button from @otfdashkit/ui.

Code
// Floating Action Button — Anchored floating action button with optional expanding actions menu.
//
// Install:
//   bun add @otfdashkit/ui

import { FloatingActionButton } from '@otfdashkit/ui'

export function Example() {
  return (
    <FloatingActionButton>
      {/* your content */}
    </FloatingActionButton>
  )
}

Props

Props declared in the FloatingActionButton source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
classNamestringExtra className on the root wrapper.
descriptionstringPanel subtitle shown below the title.
iconReactNodeIcon rendered inside the FAB. Defaults to a palette icon.
labelstring'Open panel'Tooltip / aria-label for the FAB button.
position'bottom-right' | 'bottom-left' | 'top-right' | 'top-left''bottom-right'Which corner to anchor the FAB.
sectionsFabSection[][]Sections of content to render inside the popover panel.
titlestringPanel title shown at the top of the popover.

Related