FloatingActionButton Data Binding
The FloatingActionButton displays a stack of related actions in a popup when users click it. To render the FloatingActionButton items, pass them as an array of objects to the items prop.
Item Fields
The FloatingActionButton extracts the defined fields from the data items array and displays them in the popup. All fields of an item are optional. The following fields define the item content and state:
text—The text of the item.iconandsvgIcon—The icon of the item.disabled—Determines whether the item is disabled.
For the complete list, see the FloatingActionButtonItemProps API reference.
The following demo shows text-only items, labeled icons, and icon-only items.
Item Placement
When the FloatingActionButton opens its items, the popup positions them above or below the button so that they stay within the container boundary. For a button aligned to the bottom of its container, the items appear above it. In other positions, the items appear below the button.
When an item has both an icon and text, the icon is placed closer to the container boundary. For a button aligned to the end of the container, the text renders first and the icon follows it. In right-to-left layouts, the icon stays centered relative to the main button.