FloatButton

A button that floats at the top of the page.

When to use

The most basic usage.

Change the FloatButton shape.

Set tooltip to explain an icon-only action.

Open grouped actions on hover or click.

Choose top, right, bottom, or left group expansion.

Return to the top of the page.

FloatButton with Badge.

Change the FloatButton type.

Show a short description on a square FloatButton.

Group related floating actions and share their shape.

Control a triggered group through open.

Integrate FloatButton with a third-party drag engine.

Display scroll progress around the BackTop edge.

Customize FloatButton semantic slots.

FloatButton, FloatButton.Group, FloatButton.BackTop, and their props are exported from @ceebee/ui/client.

Property	Description	Type	Default	Version
`icon`	Set the icon component of button	`ReactNode`	`-`	—
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	—
`content`	Text and other	`ReactNode`	`-`	—
`description`	Please use content instead	`ReactNode`	`-`	—
`tooltip`	The text shown in the tooltip	`ReactNode \| TooltipProps`	`-`	TooltipProps: 5.25.0
`type`	Setting button type	`default \| primary`	`default`	—
`shape`	Setting button shape	`circle \| square`	`circle`	—
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	—
`onClick`	Set the handler to handle click event	`(event) => void`	`-`	—
`href`	The target of hyperlink	`string`	`-`	—
`target`	Specifies where to display the linked URL	`string`	`-`	—
`htmlType`	Set the original html type of button, see: MDN	`submit \| reset \| button`	`button`	5.21.0
`badge`	Attach Badge to FloatButton. status and other props related are not supported.	`BadgeProps`	`-`	5.4.0
`disabled`	Whether the button is disabled	`boolean`	`-`	6.4.0

Property	Description	Type	Default	Version
`open`	Whether the menu is visible or not, use it with trigger	`boolean`	`-`	—
`closeIcon`	Customize close button icon	`React.ReactNode`	`<CloseOutlined />`	—
`placement`	Customize menu animation placement	`top \| left \| right \| bottom`	`top`	5.21.0
`shape`	Setting button shape of children	`circle \| square`	`circle`	—
`trigger`	Which action can trigger menu open/close	`click \| hover`	`-`	—
`onOpenChange`	Callback executed when active menu is changed, use it with trigger	`(open: boolean) => void`	`-`	—
`onClick`	Set the handler to handle click event (only work in Menu mode)	`(event) => void`	`-`	5.3.0

Property	Description	Type	Default	Version
`duration`	Time to return to top (ms). This property is ignored when enables reduced motion (prefers-reduced-motion: reduce)	`number`	`450`	—
`showProgress`	Show the current scroll progress ring around the BackTop button edge	`boolean`	`false`	6.6.0
`target`	Specifies the scrollable area dom node	`() => HTMLElement`	`() => window`	—
`visibilityHeight`	The BackTop button will not show until the scroll height reaches this value	`number`	`400`	—
`onClick`	A callback function, which can be executed when you click the button	`() => void`	`-`	—