antdesign

FloatButton

Buttons 1

About

Here is FloatButton component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds FloatButton to your project and fits it to your theme.

Code

How FloatButton is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { FloatButton } from 'antd';

const App: React.FC = () => (
  <>
    <FloatButton icon={<QuestionCircleOutlined />} type="primary" style={{ insetInlineEnd: 24 }} />
    <FloatButton icon={<QuestionCircleOutlined />} type="default" style={{ insetInlineEnd: 94 }} />
  </>
);

export default App;

Dependencies

More by antdesign

View all
  • Menu

    Menu

    22
  • Pagination Ant

    Pagination Ant

    16
  • Dropdown

    Dropdown

    15
  • Breadcrumb

    Breadcrumb

    10
  • Button Ant

    Button Ant

    5
  • Floating Action Menu

    Floating Action Menu

More in Buttons

View all
  • Button Save

    Button Save

    46
  • Button

    Button

    20
  • Eclipse Button

    Eclipse Button

    5
  • Button

    Button

    6
  • Button

    Button

    14
  • Button Group

    Button Group

    37
  • Button

    Button

    32
  • Split Button

    Split Button

    32

Explore more

Part of Ant Design — browse the full library on 21st.dev.