---
title: "Floating action button UI: variants and examples | Kombai"
description: "A floating action button sits above the content, usually in a bottom corner, and runs the one action the screen is for."
canonical_url: https://kombai.com/glossary/floating-action-button/
author: "The Kombai Team"
---

# Floating action button

A floating action button sits above the content, usually in a bottom corner, and runs the one action the screen is for.

- Also called: FAB
- Platforms: Web, Mobile
- In the Kombai gallery: [55 web designs](https://kombai.com/gallery/web/floating-action-button/), [35 mobile designs](https://kombai.com/gallery/mobile/floating-action-button/)

- [Tessera](https://kombai.com/gallery/inspirations/floating-action-button-ios-16/) (Mobile)
- [Ironbeck](https://kombai.com/gallery/inspirations/floating-action-button-web-45/) (Web)
- [Ambervale](https://kombai.com/gallery/inspirations/floating-action-button-ios-34/) (Mobile)

## What is a floating action button?

A floating action button, or FAB, is a button that hovers over the content instead of sitting in the layout. It stays put while the page scrolls and holds the main action of the screen, like composing, adding or scanning. Some open a short menu of related actions.

- It is a circle with one icon, or a pill with an icon and a short verb.
- A shadow lifts it above the content, usually in the bottom right corner.

## When to use floating action button

- **One main action.** The screen exists to create something, like a message, a task or an expense.
- **Long, scrolling lists.** The action stays in reach no matter how far people scroll.
- **Thumb reach on mobile.** A large target near the bottom of the screen, where a thumb rests.

## When not to use one

- **Several equal actions.** Put them in a toolbar or a row of buttons instead.
- **Destructive actions.** Delete and archive shouldn't float over the content.
- **No clear main action.** Settings and detail pages rarely need one.

## Anatomy

1. **Container**: Raised above the content
2. **Icon**: One clear symbol, like plus
3. **Label**: Optional, makes it extended
4. **Action menu**: Optional, a few related actions
5. **States**: Resting, open, collapsed, focus

## Variants

We sorted every floating action button design in the Kombai gallery and found six patterns.

### 1. Round FABs

The default. A circle in the bottom corner with one icon, like plus, an alarm or a remote.

- [Corvid](https://kombai.com/gallery/inspirations/floating-action-button-ios-15/) (Mobile)
- [Duskwren](https://kombai.com/gallery/inspirations/floating-action-button-web-12/) (Web)
- [Hearthwire](https://kombai.com/gallery/inspirations/floating-action-button-ios-31/) (Mobile)

### 2. Extended FABs

A pill with an icon and a short verb, like Log Flow, Share or Compose, which reads faster than an icon alone.

- [Stonecrop](https://kombai.com/gallery/inspirations/floating-action-button-ios-29/) (Mobile)
- [Roseneath](https://kombai.com/gallery/inspirations/floating-action-button-ios-14/) (Mobile)
- [Oakspire](https://kombai.com/gallery/inspirations/floating-action-button-web-25/) (Web)

### 3. Speed dials and action rows

One button that opens a short stack of related actions and becomes a close button, or a row of round actions like pass and like.

- [Sundial](https://kombai.com/gallery/inspirations/floating-action-button-ios-19/) (Mobile)
- [Wrenfield](https://kombai.com/gallery/inspirations/floating-action-button-web-52/) (Web)
- [Verdigris](https://kombai.com/gallery/inspirations/floating-action-button-ios-28/) (Mobile)

### 4. Map and filter pills

A floating Map, Show map or Filters pill over a list or a map, so the switch stays in reach while people scroll.

- [Oxbow Reach](https://kombai.com/gallery/inspirations/floating-action-button-ios-35/) (Mobile)
- [Dovecrest](https://kombai.com/gallery/inspirations/floating-action-button-web-39/) (Web)
- [Skyfarer](https://kombai.com/gallery/inspirations/floating-action-button-ios-17/) (Mobile)

### 5. Help and chat launchers

A round button in the bottom corner that opens support chat or help articles, the most common FAB in the web designs.

- [Rookswold](https://kombai.com/gallery/inspirations/floating-action-button-web-49/) (Web)
- [Vespera](https://kombai.com/gallery/inspirations/floating-action-button-web-16/) (Web)
- [Ravenna](https://kombai.com/gallery/inspirations/floating-action-button-ios-23/) (Mobile)

### 6. Tab bar FABs

A raised button in the middle of the tab bar, usually a plus for posting or adding an item.

- [Pitchside](https://kombai.com/gallery/inspirations/floating-action-button-ios-22/) (Mobile)
- [Wrenmoor](https://kombai.com/gallery/inspirations/floating-action-button-ios-5/) (Mobile)
- [Sableton](https://kombai.com/gallery/inspirations/floating-action-button-ios-8/) (Mobile)

## Where floating action buttons show up

### Writing and editing

A compose or pencil button over an inbox, a reader or a document, always one tap from a new draft.

- [Postern](https://kombai.com/gallery/inspirations/floating-action-button-ios-26/) (Mobile)
- [Everholt](https://kombai.com/gallery/inspirations/floating-action-button-web-23/) (Web)
- [Harrowfield](https://kombai.com/gallery/inspirations/floating-action-button-web-44/) (Web)

### Filtering long lists

A Filter pill that stays on screen while a library or a search result scrolls under it.

- [Farrowdale](https://kombai.com/gallery/inspirations/floating-action-button-ios-25/) (Mobile)
- [Nettlebridge](https://kombai.com/gallery/inspirations/floating-action-button-ios-32/) (Mobile)
- [Quillon](https://kombai.com/gallery/inspirations/floating-action-button-ios-20/) (Mobile)

### Maps

Locate, search this area and scan buttons floating over the map, clear of the pins.

- [Meridwen](https://kombai.com/gallery/inspirations/floating-action-button-ios-24/) (Mobile)
- [Nettlefold](https://kombai.com/gallery/inspirations/floating-action-button-web-35/) (Web)
- [Larkspur](https://kombai.com/gallery/inspirations/floating-action-button-ios-13/) (Mobile)

### Long pages

A small arrow that jumps back to the top of a long page or down to the latest result.

- [Sorrelby](https://kombai.com/gallery/inspirations/floating-action-button-web-40/) (Web)
- [Elmridge](https://kombai.com/gallery/inspirations/floating-action-button-web-15/) (Web)
- [Ashgrove](https://kombai.com/gallery/inspirations/floating-action-button-web-5/) (Web)

## Floating action button vs similar components

| | [Floating action button](https://kombai.com/glossary/floating-action-button/) | [Button](https://kombai.com/glossary/button/) | [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) | [Action sheet](https://kombai.com/glossary/action-sheet/) |
|---|---|---|---|---|
| Sits | Floating over the content | In the layout | Under its trigger | Up from the bottom edge |
| Actions | One main action | One per button | A list of actions | A list of actions |
| Best for | Create or compose on mobile | Actions next to content | Related actions in a menu | Choices after a tap on mobile |

## Build notes

- Use a <button> with a visible label or an aria-label, like "New expense".
- Use one per screen, for the action people take most.
- Make the hit area at least 44 by 44 points, even for a small round FAB.
- For a speed dial, set aria-expanded on the button and point aria-controls at the menu.
- Let Escape close an open speed dial and return focus to the button.
- Add bottom padding to the list, so the FAB never covers the last item.

## FAQ

### When should I use a floating action button?

When one action matters more than anything else on the screen, like composing a message or adding an expense, and people need it from anywhere in a long list. If the screen has no single main action, leave the FAB out.

### Should a floating action button have a label?

A plus works on its own for creating something, because people know it. For anything else, use an extended FAB with a short verb, like Scan or Compose. Either way, give it an accessible name.

### Do floating action buttons work on desktop web?

In the web designs in the Kombai gallery, the most common floating button is a help or chat launcher in the bottom corner. For a main action on a wide screen, a regular button in the header or toolbar is easier to find.

### Where should a floating action button go?

Usually the bottom right, above the tab bar, where a thumb reaches it. Put it in the middle of the tab bar when creating is the main job of the app, and keep it from covering the last item in a list.

## Related terms

- [Button](https://kombai.com/glossary/button/)
- [Action sheet](https://kombai.com/glossary/action-sheet/)
- [Dropdown menu](https://kombai.com/glossary/dropdown-menu/)
- [Tabs](https://kombai.com/glossary/tabs/)

## References

- [WAI-ARIA Authoring Practices: Disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/)
- [WAI-ARIA Authoring Practices: Button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
- [Apple Human Interface Guidelines: Buttons](https://developer.apple.com/design/human-interface-guidelines/buttons)