# antuikit / FloatButton

> FloatButton with its default icons drawn from your icon pack, a `squircle` shape, and a shadow without the hairline ring, plus `Group` and `BackTop`.

Docs: https://antuikit.com/docs/components/floatbutton

## Install

npx antuikit@latest init
npx antuikit@latest add float-button

## Import

import { FloatButton } from "@/components/ui/float-button";

## Demos

- [Basic](https://ui.antuikit.com/embed/float-button/basic.md): 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](https://ui.antuikit.com/embed/float-button/type-and-shape.md): Set `type` to `primary` or `default`, and `shape` to `square`, `squircle` for a smooth superellipse corner, or `circle`.
- [With text](https://ui.antuikit.com/embed/float-button/content.md): Pass `content` to put a short label on the button, with `shape` set to `square` so the text fits.
- [Tooltip](https://ui.antuikit.com/embed/float-button/tooltip.md): Pass `tooltip` a string for a quick label, or an object with `title`, `color` and `placement` like any Tooltip.
- [Badge](https://ui.antuikit.com/embed/float-button/badge.md): Pass `badge` a dot, a count, or a count with `overflowCount` to show a notification on the button.
- [Group](https://ui.antuikit.com/embed/float-button/group.md): Wrap buttons in `FloatButton.Group` to stack them, and set `shape` on the group to shape every button in it.
- [Click menu](https://ui.antuikit.com/embed/float-button/menu-trigger.md): Set `trigger` to `click` to turn a group into a menu that opens from its button and closes with a close icon.
- [Hover menu](https://ui.antuikit.com/embed/float-button/hover-trigger.md): Set `trigger` to `hover` to open the group's menu while the pointer rests on its button.
- [Controlled](https://ui.antuikit.com/embed/float-button/controlled.md): Pass `open` together with a `trigger` to control whether the group's menu is open, here from a switch.
- [Placement](https://ui.antuikit.com/embed/float-button/placement.md): Set `placement` on a group with a `trigger` to open its menu upward, downward, to the left or to the right.
- [Back to top](https://ui.antuikit.com/embed/float-button/back-top.md): Use `FloatButton.BackTop` to return to the top, with `target` for a scrolling container and `showProgress` for a progress ring.
- [Help launcher](https://ui.antuikit.com/embed/float-button/feedback-fab.md): A help button that opens on hover into a link to the docs and a feedback button that opens a modal.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/float-button`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `FloatButton` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.