React Floating Action Button (FAB) - Customizable Design and Function

Overview

The React Floating Action Button (React FAB) is an extension of the React Button that appears in front of all contents of a screen and performs a primary action. It supports several built-in features, such as icons, predefined styles, different button sizes, and UI customization.

• React FAB demo
• React FAB getting started documentation

Built-in themes

The React Floating Action Button supports several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize these built-in themes or create new ones to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application.

• Theme Studio application

React Floating Action Button Code Example

Easily get started with the React Floating Action Button using a few simple lines of TSX code example as demonstrated below. Also explore our React Floating Action Button Example that shows you how to render and configure a FAB in React.

{ /* Import the Floating Action Button */ }

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

{ /* To render Floating Action Button. */ }
export default class App extends React.Component {
    render() {
        return (<FabComponent iconCss='e-icons e-edit'></FabComponent>);
    }
}

Other supported frameworks

The Floating Action Button component is also available in Blazor, Angular, Vue, and JavaScript frameworks. Check out the component on other platforms using these links:

• Blazor Floating Action Button
• Angular Floating Action Button
• Vue Floating Action Button
• JavaScript Floating Action Button

Reference

https://www.syncfusion.com/react-components/react-button