React Floating Action Button

The Floating Action Button (FAB) enhances accessibility with its floating design and customizable icons and colors for context.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let’s add the React FAB component to the project.

Installing Syncfusion® React packages

To use the FAB component, install the @syncfusion/react-buttons package:

npm install @syncfusion/react-buttons

Adding CSS reference

Import the FAB component’s required CSS references as follows in src/App.css.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-buttons/styles/material.css';

Adding FAB component

To include the FAB component in your application, import the FAB from @syncfusion/react-buttons package in App.tsx.

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

Add the FAB component in application as shown in below code example.

import { Fab, FabPosition } from '@syncfusion/react-buttons';
import { SaveIcon } from '@syncfusion/react-icons';

export default function App() {
    return (
        <div style={{ position: 'relative', display: 'flex', minWidth: '50px', minHeight: '50px', justifyContent: 'center', }}>
            <Fab icon={<SaveIcon height={16} width={16}  />} position={FabPosition.MiddleCenter}>FAB</Fab>
        </div>

    );
}

Run the project

To run the project, use the following command:

npm run dev

The following example demonstrates how to render a simple FAB component.

Color

The FAB component provides various styles to convey different alert levels, including Warning, Success, Error, and Info, through its color property.

Icon and text

The FAB component lets you customize the button's appearance by including an icon, a text label, or both.

Size

The FAB component can be resized for design flexibility, allowing it to fit into limited spaces while maintaining its core functionality.

Position

The FAB can be placed anywhere in the UI, allowing developers to optimize its position for user impact and experience through testing.

Disabled

Disabling the FAB signals temporary unavailability, guiding users to refrain from interaction until it’s functional again. When the disabled attribute is set, the button cannot change its state.

Accessibility

The FAB component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Floating action button component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The FAB component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Floating Action Button component:

Keyboard interaction

The FAB component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Floating action button component.