Floating Action Expand
The round action button opens into a labelled list of actions that climb out of it, nearest first.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState, type ReactNode } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Floating Action Expand
*
* The round action button opens into the list of things it can actually
* do: the actions climb out of it one after another, nearest first, andAbout this pattern
One button that stands for several actions, and the moment it admits it. The actions leave the button in order — the nearest one first — so the set reads as unfolding out of the control rather than appearing around it, and closing runs the same order backwards instead of inventing a second idea. The labels only fade and travel; the scale belongs to the icon discs, which carry no type, because a resized word is the fastest way to make a menu look cheap. The plus does not swap for a close glyph, it rotates a quarter-turn into one, so the button never blinks. A scrim under the set makes the rest of the screen plainly inert while it is open, and Escape closes it.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Mobile navigation
A primary round action that opens into a short set of labelled actions.
Related patterns
- Tab Bar Icon SelectThe chosen icon fills and lifts while its label brightens, and the icon you left releases.
- Mobile Menu FullscreenA hamburger becomes a close glyph as a full-screen menu wipes in with staggered links.
- Back to Top AppearA return control lifts into the corner once the reader is deep enough for it to matter.