Usage guidelines
- 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
- 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
Accessible development on iOS
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.
- Use a descriptive label to describe the IconButtonFloating action by beginning with a verb
- Use the words "image" or "icon" in the description label. Instead, prefer to use verbs that describe the action, e.g. "Save" or "Edit"