React Floating Action Button

Overview

The KendoReact Floating Action Button is a button that appears to “float” above the content of any React application, usually serving as a shortcut to a single, common action like adding an item or composing a new email. The React Floating Action Button component can be customized to make sure the button fits any application design. Additionally, the button can feature a "speed dial" set of buttons that will animate out of the main button and provide multiple options to select from.

See React Floating Action Button demo

React Floating Action Button Component

Disabled State

For scenarios that call for preventing user interaction until certain requirements are met, the React Floating Action Button component can be disabled with a single configuration option. This gives users a clear visual indication that the React component cannot be interacted with.

See React Floating Action Button demo in Disabled State

Disabled React Floating Action Button

Content Types

The content within the KendoReact Floating Action Button can be completely customized through the available properties. Access the icon, iconClass and text properties to define the React Floating Action Button icon, apply a custom CSS class to control the style of the button and set text displayed within the component.

See React Floating Action Button Content Types demo

React Floating Action Button Content Types

Speed Dial

If additional action items should be available to users, the speed dial feature of the KendoReact Floating Action Button is the perfect solution. It represents a list of additional buttons that appear above the React Floating Action Button when the main button is clicked. You can customize the speed dial buttons to give them their own unique style.

See React Floating Action Button Speed Dial demo

React Floating Action Button Speed Dial

Positioning

The KendoReact Floating Action Button provides several configuration options to assist with defining where the React component should be displayed within the application. The available configuration removes the hassle of manual calculations and instead lets developers fix the position of the React Floating Action Button by setting the horizontal and vertical values through easy-to-remember options like “start”, “center”, “end”, “top”, “middle” and “bottom”.

See React Floating Action Button Positioning demo

React Floating Action Button Positioning

Appearance

You can set the theme color, shape and size properties of the component to create a uniquely styled React Floating Action Button. Choose from ready-to-use theme colors like success, warning, error and more and define the shape of the KendoReact Floating Action Button to be rectangular, circular or go with the default pill shape.

See React Floating Action Button Appearance demo

React Floating Action Button Appearance

Keyboard Navigation

The KendoReact Floating Action Button supports keyboard navigation and enables users to perform the targeted action using just the keyboard.

See React Floating Action Button Keyboard Navigation demo

Accessibility

The KendoReact team understands how important accessibility is for the web and this drives the team to make accessibility a core feature of every component. The KendoReact Floating Action Button complies with Section 508 and WCAG 2.0 standards with an AAA rating.

See React Floating Action Button Accessibility demo

React Floating Action Button Accessibility

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.