logoMogu Design

⌘ K
  • Design
  • Development
  • Components
  • Components Overview
  • General
    • Button
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
  • Other
    • Affix
    • App
    • ConfigProvider
    • FloatButton
    • Watermark
When To Use
Examples
Basic
Type
Shape
Description
FloatButton with tooltip
FloatButton Group
Menu mode
Controlled mode
BackTop
badge
API
common API
FloatButton.Group
FloatButton.BackTop

FloatButton

ConfigProviderWatermark

FloatButton. Available since 5.0.0.

When To Use

  • For global functionality on the site.
  • Buttons that can be seen wherever you browse.

Examples

API

This component is available since antd@5.0.0.

common API

PropertyDescriptionTypeDefaultVersion
iconSet the icon component of buttonReactNode-
descriptionText and otherReactNode-
tooltipThe text shown in the tooltipReactNode | () => ReactNode
typeSetting button typedefault | primarydefault
shapeSetting button shapecircle | squarecircle
onClickSet the handler to handle click event(event) => void-
hrefThe target of hyperlinkstring-
targetSpecifies where to display the linked URLstring-
badgefloat-button with round logo numberrefer badge-5.4.0

FloatButton.Group

PropertyDescriptionTypeDefaultVersion
shapeSetting button shape of childrencircle | squarecircle
triggerWhich action can trigger menu open/closeclick | hover-
openWhether the menu is visible or not, use it with triggerboolean-
onOpenChangeCallback executed when active menu is changed, use it with trigger(open: boolean) => void-

FloatButton.BackTop

PropertyDescriptionTypeDefaultVersion
durationTime to return to top（ms）number450
targetSpecifies the scrollable area dom node() => HTMLElement() => window
visibilityHeightThe BackTop button will not show until the scroll height reaches this valuenumber400
onClickA callback function, which can be executed when you click the button() => void-
Basic

The most basic usage.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'mogud';

const App: React.FC = () => <FloatButton onClick={() => console.log('click')} />;

export default App;
Shape

Change the shape of the FloatButton with shape.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'mogud';
import { CustomerServiceOutlined } from '@ant-design/icons';

const App: React.FC = () => (
  <>
    <FloatButton
      shape="circle"
      type="primary"
      style={{ right: 94 }}
      icon={<CustomerServiceOutlined />}
    />
    <FloatButton
      shape="square"
      type="primary"
      style={{ right: 24 }}
      icon={<CustomerServiceOutlined />}
    />
  </>
);

export default App;
FloatButton with tooltip

Setting tooltip prop to show FloatButton with tooltip.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'mogud';

const App: React.FC = () => <FloatButton tooltip={<div>Documents</div>} />;

export default App;
Menu mode

Open menu mode with trigger, which could be hover or click.

expand codeexpand code
TypeScript
JavaScript
import { CommentOutlined, CustomerServiceOutlined } from '@ant-design/icons';
import { FloatButton } from 'mogud';
import React from 'react';

const App: React.FC = () => (
  <>
    <FloatButton.Group
      trigger="click"
      type="primary"
      style={{ right: 24 }}
      icon={<CustomerServiceOutlined />}
    >
      <FloatButton />
      <FloatButton icon={<CommentOutlined />} />
    </FloatButton.Group>
    <FloatButton.Group
      trigger="hover"
      type="primary"
      style={{ right: 94 }}
      icon={<CustomerServiceOutlined />}
    >
      <FloatButton />
      <FloatButton icon={<CommentOutlined />} />
    </FloatButton.Group>
  </>
);

export default App;
BackTop

BackTop makes it easy to go back to the top of the page.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'mogud';

const App: React.FC = () => (
  <div style={{ height: '500vh', padding: 10 }}>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <FloatButton.BackTop />
  </div>
);

export default App;
Type

Change the type of the FloatButton with type.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'mogud';
import { QuestionCircleOutlined } from '@ant-design/icons';

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

export default App;
Description

Setting description prop to show FloatButton with description.

supported only when shape is square. Due to narrow space for text, short sentence is recommended.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'mogud';
import { FileTextOutlined } from '@ant-design/icons';

const App: React.FC = () => (
  <>
    <FloatButton
      icon={<FileTextOutlined />}
      description="HELP INFO"
      shape="square"
      style={{ right: 24 }}
    />
    <FloatButton description="HELP INFO" shape="square" style={{ right: 94 }} />
    <FloatButton
      icon={<FileTextOutlined />}
      description="HELP"
      shape="square"
      style={{ right: 164 }}
    />
  </>
);

export default App;
FloatButton Group

When multiple buttons are used together, <FloatButton.Group /> is recommended. By setting shape of FloatButton.Group, you can change the shape of group. shape of FloatButton.Group will override shape of FloatButton inside.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'mogud';
import { QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';

const App: React.FC = () => (
  <>
    <FloatButton.Group shape="circle" style={{ right: 24 }}>
      <FloatButton icon={<QuestionCircleOutlined />} />
      <FloatButton />
      <FloatButton.BackTop visibilityHeight={0} />
    </FloatButton.Group>
    <FloatButton.Group shape="square" style={{ right: 94 }}>
      <FloatButton icon={<QuestionCircleOutlined />} />
      <FloatButton />
      <FloatButton icon={<SyncOutlined />} />
      <FloatButton.BackTop visibilityHeight={0} />
    </FloatButton.Group>
  </>
);

export default App;
Controlled mode

Set the component to controlled mode through open, which need to be used together with trigger.

expand codeexpand code
TypeScript
JavaScript
import { CommentOutlined, CustomerServiceOutlined } from '@ant-design/icons';
import { FloatButton, Switch } from 'antd';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [open, setOpen] = useState(true);

  const onChange = (checked: boolean) => {
    setOpen(checked);
  };

  return (
    <>
      <FloatButton.Group
        open={open}
        trigger="click"
        style={{ right: 24 }}
        icon={<CustomerServiceOutlined />}
      >
        <FloatButton />
        <FloatButton icon={<CommentOutlined />} />
      </FloatButton.Group>
      <Switch onChange={onChange} checked={open} style={{ margin: 16 }} />
    </>
  );
};

export default App;
badge

FloatButton with Badge.

expand codeexpand code
TypeScript
JavaScript
import { QuestionCircleOutlined } from '@ant-design/icons';
import { FloatButton } from 'mogud';
import React from 'react';

const App: React.FC = () => (
  <>
    <FloatButton shape="circle" badge={{ dot: true }} style={{ right: 24 + 70 + 70 }} />
    <FloatButton.Group shape="circle" style={{ right: 24 + 70 }}>
      <FloatButton tooltip={<div>custom badge color</div>} badge={{ count: 5, color: 'blue' }} />
      <FloatButton badge={{ count: 5 }} />
    </FloatButton.Group>
    <FloatButton.Group shape="circle">
      <FloatButton badge={{ count: 12 }} icon={<QuestionCircleOutlined />} />
      <FloatButton badge={{ count: 123, overflowCount: 999 }} />
      <FloatButton.BackTop visibilityHeight={0} />
    </FloatButton.Group>
  </>
);

export default App;