Component

Floating Action Bar

A speed dial: a circular trigger that fans a column of labelled actions out from itself. The actions stagger in nearest-first and taper with distance, so the column reads as unfurling from the button rather than a menu appearing.

Basic

Press the trigger to expand. Escape or a click outside collapses it again.

Press the button to expand.

Actions stagger in nearest the trigger first, and reverse on close so the column furls back into it
Each step further from the trigger is slightly smaller - that taper is what gives the column depth
Collapsed actions stay mounted so they can animate, but are inert and hidden from assistive technology

Expanded by default

defaultOpen renders it already expanded - useful for a toolbar that is the primary control on a screen.

Favourite

Rename

Delete

destructive marks an action as dangerous, so it reads in the fire tone

Over content

Its natural home: pinned above a scrolling surface, where it stays reachable without occupying layout.

Scrolling content sits underneath; the bar floats above it.

Direction

direction='auto' (the default) opens towards whichever side of the viewport has room - down near the top of the screen, up near the bottom. Set 'up' or 'down' to fix it.

down

auto measures when the dial opens and holds that side while it is open, so the column cannot flip mid-animation

Controlled

open and onOpenChange hand the state to you, so the rest of the screen can follow it - here a scrim dims the draft while the actions are out.

Quarterly report

Draft - last edited 2 minutes ago.

onOpenChange fires for the trigger, Escape, an outside press, and a chosen action alike

API reference

Prop	Type	Default	Description
actions *	FloatingActionBarAction[]	None	The actions, ordered outwards from the trigger.
defaultOpen	boolean	false	Renders already expanded - for a bar that is the primary control on a screen.
direction	"up" \| "down" \| "auto"	"auto"	Which way the actions fan out. `"auto"` (default) picks the side with room in the viewport; `"up"` or `"down"` forces it.
icon	React.ReactNode	None	Icon for the trigger. Defaults to a plus that rotates into a close.
label	string	"Actions"	Accessible name for the trigger. Default "Actions".
onOpenChange	((open: boolean) => void)	None	Called whenever the dial opens or closes, including via Escape or an outside press.
open	boolean	None	Controlled expanded state. Omit + use `defaultOpen` for uncontrolled.

actions *None

FloatingActionBarAction[]

The actions, ordered outwards from the trigger.

defaultOpenfalse

boolean

Renders already expanded - for a bar that is the primary control on a screen.

direction"auto"

"up" | "down" | "auto"

Which way the actions fan out. `"auto"` (default) picks the side with room in the viewport; `"up"` or `"down"` forces it.

iconNone

React.ReactNode

Icon for the trigger. Defaults to a plus that rotates into a close.

label"Actions"

string

Accessible name for the trigger. Default "Actions".

onOpenChangeNone

((open: boolean) => void)

Called whenever the dial opens or closes, including via Escape or an outside press.

openNone

boolean

Controlled expanded state. Omit + use `defaultOpen` for uncontrolled.

Also accepts everything from Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent