FloatButton

A button that floats above the content rather than sitting in it, on its own or as a group that opens on click or hover.

Basic

A FloatButton floats over a corner of the page, with a default icon from your pack or your own icon and tooltip.

Type and shape

Set type to primary or default, and shape to square, squircle for a smooth superellipse corner, or circle.

With text

Pass content to put a short label on the button, with shape set to square so the text fits.

Tooltip

Pass tooltip a string for a quick label, or an object with title, color and placement like any Tooltip.

Badge

Pass badge a dot, a count, or a count with overflowCount to show a notification on the button.

Group

Wrap buttons in FloatButton.Group to stack them, and set shape on the group to shape every button in it.
Set trigger to click to turn a group into a menu that opens from its button and closes with a close icon.

Hover menu

Set trigger to hover to open the group's menu while the pointer rests on its button.

Controlled

Pass open together with a trigger to control whether the group's menu is open, here from a switch.

Placement

Set placement on a group with a trigger to open its menu upward, downward, to the left or to the right.

Back to top

Use FloatButton.BackTop to return to the top, with target for a scrolling container and showProgress for a progress ring.

In context

The component inside real screens, with the components it usually sits beside.

Help launcher

A help button that opens on hover into a link to the docs and a feedback button that opens a modal.

API Reference

FloatButton
FloatButton's props. Rows marked antuikit in the Version column are added by the kit.
FloatButton.Group
FloatButton.Group's props. Rows marked antuikit in the Version column are added by the kit.
FloatButton.BackTop
FloatButton.BackTop's props. Rows marked antuikit in the Version column are added by the kit.