Components
FloatingActionButton
A round, fixed-position button pinned to a screen corner for the primary action.
FloatingActionButton is a circular Button pinned to a corner of the viewport
with position: fixed, used for the one dominant action on a screen — compose,
add, new. Choose the corner with placement (defaults to bottom-right). It
forwards all Button props, so set variant and an aria-label for the
icon-only content.
Example
Preview
import { FloatingActionButton } from '@officina/ui';
import { Plus } from 'lucide-react';
<FloatingActionButton placement="bottom-right" aria-label="New item" onClick={create}>
<Plus />
</FloatingActionButton>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| isLoading | boolean | — | Show a loading spinner and disable the button while an action is in flight. |
| placement | enum | bottom-right | Fixed corner the button is anchored to. |
| size | "xs" | "sm" | "md" | "lg" | "icon" | "icon-sm" | null | icon | |
| variant | "primary" | "secondary" | "outline" | "ghost" | "soft" | "danger" | "success" | null | — |