FloatingActionButton

Persistent action button that floats above the page. Three sizes, three variants, optional extended pill with label.

Pass position to anchor the FAB to a viewport edge (default: bottom-right). Use position="static" to place inline.

Usage

import { FloatingActionButton, FAB } from '@bwo-ui/react';

<FAB icon={<PlusIcon />} label="New item" />

<FAB icon={<PlusIcon />} variant="accent" position="bottom-right" />

Props

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Icon element rendered inside the button.
`label`	`ReactNode`	—	When present, the FAB renders in extended pill mode.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size preset.
`variant`	`'primary' \| 'accent' \| 'surface'`	`'primary'`	Color variant.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' \| 'bottom-center' \| 'static'`	`'bottom-right'`	Viewport anchor. Use static to render inline.
`offset`	`number`	`24`	Distance (px) from the viewport edge.