# 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.

Page: https://www.appetiteui.com/academy/glossary/floating-action-button. Floating action button: Material 3 and iOS. Also called FAB.

## At a glance

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | No component; the action goes in a toolbar or the navigation bar | Floating action button and extended FAB | Floating Action Button, in /docs/button |

## 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 UI | iOS counterpart | Material 3 counterpart | What differs |
| --- | --- | --- | --- |
| Floating Action Button | None. On iOS use a toolbar action. | M3 / FAB and M3 / Extended FAB | Appetite 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

1. [Material Design 3: Floating action button](https://m3.material.io/components/floating-action-button/overview)
2. [Apple Human Interface Guidelines: Toolbars](https://developer.apple.com/design/human-interface-guidelines/toolbars)

## Related

- Docs: [Button](https://www.appetiteui.com/docs/button)
- Article: [iOS vs Material 3: what changes per component](https://www.appetiteui.com/blog/ios-vs-material-3-components)
- Glossary: [Tab bar](https://www.appetiteui.com/academy/glossary/tab-bar)
- Glossary: [Top app bar](https://www.appetiteui.com/academy/glossary/top-app-bar)