IconButtonFloating

IconButtonFloating represents the primary or most common action on the screen. As the name suggests, it floats over the content and is always on top of everything on the screen. Similar to IconButton, the floating version uses icons instead of text to convey available actions. However, it is used when the action needs to be visible at all times in a sticky way where content can scroll underneath. IconButtonFloating remains in place on scroll.

also known as Glyph button, Floating action button, FAB, Quick create

IconButtonFloating component

Usage guidelines

When to use
  • To represent a primary or common action when it has to be visible all the time on the screen on top of everything
  • Triggering a Sheet to complete a related task
  • Only if it is the most suitable way to present a screen's high-emphasis action
When not to use
  • There isn't a need for a fixed IconButtonFloating visible all the time on the screen
  • To replace IconButton established patterns, such as navigation elements

Accessibility

People use Apple’s accessibility features, such as reduced transparency, VoiceOver, and increased text size, to personalize how they interact with their devices. Supporting these personalizations ensures that everyone has a great user experience. See Apple’s Human Interface Guidelines and documentation about accessibility for iOS:

Accessible design on iOS

, Opens a new tab

Accessible development on iOS
, Opens a new tab

Design tokens

Use these tokens for applying size and color styles to IconButtonFloating.


Please note: Icons on IconButtonFloating have a limited range of colors and sizes compared to regular icons, as they are different components and have particular usage cases. See Icon for additional information.

Anatomy

IconButtonFloating uses icons instead of text to convey available actions on a screen. Some buttons are specialized for particular tasks, such as navigation or presenting menus. Icons(.svg viewbox) dimensions are the same for all icons regardless of the size of the vector asset inside of the container. See Icon for more information.


Variants

Selected

Indicates whether the associated dropdown is open or closed. Not used when IconButtonFloating opens a dialog.

Light mode


Dark mode


Writing

For writing best practices, refer to the content standards.

Do
  • Use a descriptive label to describe the IconButtonFloating action by beginning with a verb
Don't
  • Use the words "image" or "icon" in the description label. Instead, prefer to use verbs that describe the action, e.g. "Save" or "Edit"
Edit page on GitHub