IconButtonFloating Pilot
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.
By default, it has a circular shape with a floating elevation shadow style built-in; when pressed, it will open more related actions by triggering Dropdown or Modal.
IconButtonFloating is typically found in the Home feed, boards, and dashboards, allowing Pinners to perform core actions.
also known as Glyph button, Floating action button, FAB, Quick create
Props
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 Modal or a Popover 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.
Best practices
Use when an action has to be visible at all times in a sticky way where content can scroll underneath.
Layer notification badges on top of IconButtonFloating. This pattern is typically used on IconButtons part of a navigation component, and IconButtonFloating shouldn't contain notifications found elsewhere on a screen, as it can lead to cognitive and usability issues. Users with color-blinded vision could also miss it since it doesn't offer a visually supportive affordance besides color.
Use IconButtonFloating for positive and supportive actions like Create, Help or Maximize.
Use IconButtonFloating for negative and destructive actions like Delete or Remove.
Use the designated size and style.
Scale or style IconButtonFloating. Consistent button sizes promote a cohesive user experience.
Accessibility
ARIA attributes
IconButtonFloating conveys the component behavior using iconography. IconButtonFloating requires accessibilityLabel
, a text description for screen readers to announce and communicate the represented Icon. In the example below, the screen reader reads: "Create Pin menu". The label should describe the intent of the action, not the Icon itself. For example, use "Edit board" instead of "Pencil".
If IconButtonFloating is used as a control button to show/hide a Popover-based component, we recommend passing the following ARIA attributes to assist screen readers:
accessibilityControls
: informs the screen reader that IconButtonFloating controls the display of a Dropdown. Not needed if IconButtonFloating opens a Modal or other dialog. It populates aria-controls.accessibilityPopupRole
: informs the screen reader that there’s either amenu
component, like Dropdown, or adialog
component, like Modal or Popover, attached to IconButtonFloating. It populates aria-haspopup.accessibilityExpanded
: informs the screen reader whether an anchored Dropdown component is currently open or closed. It populates aria-expanded.
Keyboard interaction
IconButtonFloating should be contained within the role="contentinfo"
container on a page. This gives screen reader users the ability to skip any main content and go directly to the action buttons. If there are multiple IconButtonFloatings, they should all be contained within the role="contentinfo"
container.
Localization
Be sure to localize accessibilityLabel
.
Variants
Size
IconButtonFloating size is only available in a single size, 56px. Keeping the size consistent will promote a cohesive Pinner experience and avoid usability issues.
Elevation
Floating
IconButtonFloating is lifted off of the background with shadows built-in ($elevation-floating). It must be absolutely positioned to achieve the floating effect.
In dark mode, the elevation is achieved with colors instead of shadows ($color-background-elevation-floating). See elevation guidelines for reference.
Placement
IconButtonFloating is always placed along the bottom of the screen. A consistent position improves discoverability when IconButtonFloating appears across a responsive range of surfaces. For example, an IconButtonFloating used to open resources should remain in the same spot on the page across surfaces. In most cases, only one IconButtonFloating should be present on a screen. The exception is using a centered IconButtonFloating as a primary action, like board creation.
Bottom edge placement
IconButtonFloating should typically be placed in the bottom edge of the screen (bottom right for LTR languages, and bottom left for RTL languages). This applies to supportive actions, such as opening related content and resources.
Centered placement
Use a centered placement when leading Pinners to an action or task that should remain present when scrolling, such as creating a new board.
Writing
- 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".
Component quality checklist
Quality item | Status | Status description |
---|---|---|
Figma Library | Ready | Component is available in Figma across all platforms. |
Responsive Web | Ready | Component is available in code for web and mobile web. |
iOS | Planned | Component is slotted to be built for iOS. |
Android | Planned | Component is slotted to be built for Android. |
Related
IconButton
Use IconButton when only an icon is needed instead of text, and the action does not float over other content.
Button
Button allows users to take actions, and make choices using text labels to express what action will occur when the user interacts with it.
Icon
IconButtonFloating uses icons instead of text to convey available actions on a screen. Use an existing Icon from the Gestalt Icon library.
Dropdown
It's most common to anchor Dropdown to Button, IconButton, or IconButtonFloating.