Skip to content

By Bob Poláček, updated

Copy page

Floating action button

A floating action button is a round button that floats over the content for the one action a screen exists for, such as a new task. It is a Material component; iOS puts the same action in a bar.

Copy page

By Bob Poláček, updated

On this page
  1. At a glance
  2. In the kit
  3. In practice
  4. Questions
  5. Sources
  6. Related

Floating action button on iOS and Android

Also called FAB. The same idea in each system, with the values Appetite UI gives it.

Floating action button at a glance, iOS, Android, Appetite UI
iOSAndroid (Material 3)Appetite UI
NameNo component; the action goes in a toolbar or the navigation barFloating action button and extended FABFloating Action Button, in /docs/button

In the kit

Where it appears in Appetite UI: Task manager app, My work, and the components, live. The theme switch shows the dark frame.

Floating Action Button, live componentsKit geometry, light and dark

Floating Action Button, closed and open

My work393 x 852 each, Light and Dark
Tasks app My work screen: a This week card with 12 of 23 done, 4 due today, 7 in progress and 12 done, a Today, Upcoming and Done switch, task rows with checkboxes, labels and assignee avatars, and a floating add button above the tab barTasks app My work screen in dark mode: a This week card with 12 of 23 done, 4 due today, 7 in progress and 12 done, a Today, Upcoming and Done switch, task rows with checkboxes, labels and assignee avatars, and a floating add button above the tab bar
My work

In practice

One per screen, for the most common creative action, and never for something destructive. If a screen has two main actions, it has none, and a toolbar or a button in the bar serves better.

Appetite UI draws one 56 circle that opens a stack of actions, used on the tasks My work screen above the tab bar. Material 3 sizes the FAB at 40, 56 and 96.

Button against its iOS and Material 3 counterparts, component, iOS, Material 3, difference
Appetite UIiOS counterpartMaterial 3 counterpartWhat differs
Floating Action ButtonNone. On iOS use a toolbar action.M3 / FAB and M3 / Extended FABAppetite UI draws one 56 circle with an Open stack. Material 3 FAB comes in 40, 56 and 96.

Questions

Does iOS have a floating action button?

No. Apple’s guidelines have no floating button; on iOS the main action of a screen goes in the toolbar or the navigation bar. Appetite UI’s Floating Action Button is for Android frames, or for an app that uses it on both platforms by choice.

What sizes does a floating action button come in?

Material 3 draws the FAB at 40, 56 and 96, plus an extended FAB with a label. Appetite UI draws one 56 circle that opens into a stack of actions.

Sources

The pages the facts above rest on.

  1. Material Design 3: Floating action button, read October 13, 2026
  2. Apple Human Interface Guidelines: Toolbars, read October 13, 2026