ant-design
  1. ant-design-floatbutton
PreviousNext

Ant Design FloatButton

Ant Design FloatButton is a UI component that helps to create a floating button that is positioned on the bottom-right corner of the screen. It's a useful component for creating important calls-to-action or navigation buttons that stay in view regardless of scroll position.

Syntax

To use the Ant Design FloatButton component, import it as shown below:

import { FloatButton } from 'antd';

Then, you can use it in your JSX code like this:

<FloatButton />

Use and Importance

The FloatButton component is a versatile and highly useful component for any web application. It allows developers to easily add a floating button to their UI that can be used for a variety of purposes, including:

  • Navigating to a specific page or section of the application
  • Making a call-to-action
  • Saving or submitting data

The importance of the float button for certain applications cannot be overstated. For long-scrolling pages or content-heavy websites, a button that stays in view regardless of how far down the user scrolls is a valuable resource that can improve the user experience and increase engagement.

Example

Here is an example of how to use the Ant Design FloatButton component:

import { FloatButton } from 'antd';

const App = () => {
  const handleClick = () => {
    console.log('Clicked');
  };

  return (
    <div>
      <h1>My App</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
      <FloatButton onClick={handleClick}>Add Item</FloatButton>
    </div>
  );
};

export default App;

In this example, the FloatButton component is positioned on the bottom-right corner of the screen and triggers the handleClick function when clicked.

Summary

The Ant Design FloatButton component is a versatile and highly useful UI component that can improve the user experience of any web application. Its ability to stay in view regardless of scroll position makes it a valuable resource for long-scrolling pages or content-heavy websites. By using the FloatButton component, developers can easily add important calls-to-action or navigation buttons to their UIs.

ButtonIcon
Published on: