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

Figma:

Web:

iOS:

Android:

A11y:

function IconButtonFloatingExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState([]);
  const anchorRef = React.useRef(null);

  const onSelect = ({ item }) => {
    if (selected.some(({ value }) => value === item.value)) {
      setSelected((selectedValue) => selectedValue.filter(({ value }) => value !== item.value));
    } else {
      setSelected((selectedValue) => [...selectedValue, item]);
    }
  };

  return (
    <Flex width="100%" height="100%" justifyContent="center" alignItems="center">
      <IconButtonFloating
        accessibilityControls="sections-dropdown-example"
        accessibilityExpanded={open}
        accessibilityPopupRole="menu"
        accessibilityLabel="Create Pin Menu"
        icon="add"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
      />
      {open && (
        <Dropdown
          anchor={anchorRef.current}
          id="sections-dropdown-example"
          onDismiss={() => setOpen(false)}
        >
          <Dropdown.Section label="Create">
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Pin', label: 'Pin' }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Story Pin', label: 'Story Pin' }}
              selected={selected}
            />
          </Dropdown.Section>
          <Dropdown.Section label="Add">
            <Dropdown.Item
              badge={{ text: 'New' }}
              onSelect={onSelect}
              option={{ value: 'Note', label: 'Note' }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Section', label: 'Section' }}
              selected={selected}
            />
          </Dropdown.Section>
        </Dropdown>
      )}
    </Flex>
  );
}

function IconButtonFloatingExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState([]);
  const anchorRef = React.useRef(null);

  const onSelect = ({ item }) => {
    if (selected.some(({ value }) => value === item.value)) {
      setSelected((selectedValue) => selectedValue.filter(({ value }) => value !== item.value));
    } else {
      setSelected((selectedValue) => [...selectedValue, item]);
    }
  };

  return (
    <Flex width="100%" height="100%" justifyContent="center" alignItems="center">
      <IconButtonFloating
        accessibilityControls="sections-dropdown-example"
        accessibilityExpanded={open}
        accessibilityPopupRole="menu"
        accessibilityLabel="Create Pin Menu"
        icon="add"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
      />
      {open && (
        <Dropdown
          anchor={anchorRef.current}
          id="sections-dropdown-example"
          onDismiss={() => setOpen(false)}
        >
          <Dropdown.Section label="Create">
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Pin', label: 'Pin' }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Story Pin', label: 'Story Pin' }}
              selected={selected}
            />
          </Dropdown.Section>
          <Dropdown.Section label="Add">
            <Dropdown.Item
              badge={{ text: 'New' }}
              onSelect={onSelect}
              option={{ value: 'Note', label: 'Note' }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Section', label: 'Section' }}
              selected={selected}
            />
          </Dropdown.Section>
        </Dropdown>
      )}
    </Flex>
  );
}

Props

Component props
Name	Type	Default
`accessibilityLabel` Required	`string`	-
	String that clients such as VoiceOver will read to describe the icon button. Always localize the label. See Accessibility section for more info.
`accessibilityPopupRole` Required	`"menu" \| "dialog"`	-
	Indicates whether this component displays a menu, such as Dropdown, or a dialog, like Popover, Modal or ModalAlert. See the Accessibility guidelines for details on proper usage.
`icon` Required	`unknown`	-
	Icon displayed in IconButtonFloating to convey the behavior of the component. Refer to the iconography guidelines regarding the available icon options.
`onClick` Required	`({\| event: \| SyntheticMouseEvent<HTMLButtonElement> \| SyntheticKeyboardEvent<HTMLButtonElement> \| SyntheticMouseEvent<HTMLAnchorElement> \| SyntheticKeyboardEvent<HTMLAnchorElement>, dangerouslyDisableOnNavigation: () => void, \|}) => void`	-
	Callback fired when the component is clicked, pressed or tapped.
`accessibilityControls`	`string`	-
	Specifies the `id` of an associated element (or elements) whose contents or visibility are controlled by IconButtonFLoating so that screen reader users can identify the relationship between elements. See the Accessibility guidelines for details on proper usage.
`accessibilityExpanded`	`boolean`	-
	Used to indicates that IconButtonFloating hides or exposes a Dropdown and details whether it is currently open or closed. See the Accessibility guidelines for details on proper usage.
`selected`	`boolean`	-
	Indicates whether the associated Dropdown is open or close. Not used when IconButtonFloating opens a dialog.

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 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.

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.

Best practices

Use when an action has to be visible at all times in a sticky way where content can scroll underneath.

Don't

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.

Don't

Use IconButtonFloating for negative and destructive actions like Delete or Remove.

Use the designated size and style.

Don't

Scale or style IconButtonFloating. Consistent button sizes promote a cohesive user experience.

Accessibility

Ready

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 a menu component, like Dropdown, or a dialog 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.

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".

Component quality checklist

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.

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.

Edit page on GitHub

; Opens a new tab

IconButtonFloating Pilot

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

Props

Usage guidelines

Best practices

Accessibility

ARIA attributes

Keyboard interaction

Localization

Variants

Size

Elevation

Placement

Writing

Component quality checklist

Related

IconButtonFloating
Pilot