“Floating action buttons” on iOS (yes, they’re here)

Tuesday, December 5th, 2017

December 2023 update: Apple newest app, Journal (press release | help content) features a prominent floating button in the bottom middle of the screen. Interestingly, however, this button style remains unacknowledged in the HIG page for buttons.

Apple Journal app showing journal entries and then at the bottom of the screen is a large circular button with a plus icon in the middle of it.

February 2023 update: Please note, this was originally written in December 2017. In the 5 years that have passed, Apple has not embraced the FAB as strongly as I predicted it might — it’s still more of an outlier on first-party iOS apps.

The floating action button (FAB) is one of the most distinctive components of Material Design.

Its intention when it first came out was to offer easy access to the primary action on a page, and it was positioned near the bottom of the screen in order to make it easy for smartphone users to utilize. There has been debate about its merits among designers, but it has stuck around and become more prominent, even in apps that aren’t designed by Google or that aren’t based in Material Design.

I’ve been collecting some examples of the FAB and FAB-like buttons on iOS. I find these particularly interesting because iOS does not offer a FAB or anything like a FAB as an out-of-the-box component. But with tall screens becoming more of the norm (first the iPhone Plus and now the iPhone X) I wouldn’t be terribly surprised if iOS 12 or a later version offered something like that for third-party apps. First-party iOS apps have traditionally placed common or primary actions in the navigation bar (see the Calendar app as an example). These aren’t very thumb-friendly.

But iOS and first-party iOS apps have made “thumb-friendly” changes in recent years. “Swipe to go back” is one of them (it debuted in iOS 7). The Maps app in particular was redesigned as of a couple years ago so that most of the UI is within reach of your thumb. And in two apps, Apple seems to be dipping its toes into what looks awfully like a FAB as defined by the Material Design guidelines.

Let’s a take a closer first at some of these first-party iOS apps that have adopted FABs.

First-party iOS Apps with FABs

Here are two examples.

Notes App

What’s that? Yeah, something awfully like a FAB in the Notes app.

Tap the FAB and it expands to show a tray of actions you can take (insert a table, format text, make a checklist, add an image or attachment, or draw). Tap the X to collapse it back into a circular button.

Numbers App

Yup, two FABs in the Numbers app.

The keyboard icon will pull up a keyboard that also has something like a tray of actions arrayed on top of it. The “Cell” button pulls up a drawer that looks awfully like the Map app’s UI.

The Numbers app after tapping the Cell FAB.

Third-Party iOS Apps with FABs

Things 3

None other than 2017 Apple Design Award winner Things 3 prominently uses a FAB in pretty much every screen in the app. It’s used to create a new task, but it gets even more interesting when you move it around: you can place the new task exactly where you want it in your list or drag it over into a circle that appears in the bottom left that will send it to your Inbox (the behavior of the button changes slightly based on the context in which you tap it). Apple describes the app as having “innovative interactions and gestures” – a nod of approval perhaps?

Things 3 has a FAB that appears on basically every screen.

I’ll round out this post with a few more iOS apps where I have spotted a stray FAB (not to mention Google’s apps like Gmail or Google Calendar).

Airtable

Airtable (swoon) has a FAB.

Day One

Day One’s FAB is more for entering an edit mode rather than creating something new.

Post-It Plus

A FAB for adding a new Post-It or a new image.

Paste

Paste is a new app for creating decks on your phone (though you can also do it through a web browser).

A FAB for adding a new slide.