Floating Action Button Component

The Floating Action Button (FAB) component offers a prominent primary action for an application interface, prominently positioned and styled to stand out with custom icon support.

Usage

To import and use the Floating Action Button component in your application, use the following code snippet:

import { Fab, Color, FabPosition } from "@syncfusion/react-buttons";

<Fab color={Color.Success} position={FabPosition.BottomLeft}>FAB</Fab>

import { Fab, Color, FabPosition } from "@syncfusion/react-buttons";

<Fab color={Color.Success} position={FabPosition.BottomLeft}>FAB</Fab>

Demos

Explore the demos of the React Floating Action Button component. Refer to this page.

Props

The following table outlines the props for the Floating Action Button component:

Name	Type	Default	Description
color	Color	Color.Primary	Specifies the Color style of the FAB button. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Error', and 'Info'.
icon	node	-	Defines an icon for the button, which can either be a CSS class name for custom styling or an SVG element for rendering.
iconPosition	Position	Position.Left	Defines the position of the icon relative to the text on the FAB. Options may include 'Left', 'Right', 'Top', or 'Bottom'.
position	FabPosition	FabPosition.BottomRight	Specifies the position of the Floating Action Button (FAB) relative to its target element. Options may include positions such as top-left, top-right, bottom-left, and bottom-right.
size	Size	Size.Medium	Specifies the size style of the FAB button. Options include 'Small', 'Medium' and 'Large'.
toggleable	boolean	false	Enables toggle behavior for the FAB. If `true`, the FAB will act as a toggle button, changing state on each click.
visible	boolean	true	Determines the visibility of the Floating Action Button. When `true`, the FAB is visible; when `false`, it is hidden.