opinion
FloatingBubble
A round button you can drag anywhere, optionally snapping to the nearest edge.
Quick-add bubbleDrag it around; a tap still clicks
Harbour rebrand
Identity, site and launch kit for the harbour trust.
In context
Tasks on a phoneA quick-add bubble above the tab bar
My tasks
Draft launch checklist
Priya Nair · Harbour rebrand
Book crew interviews
Leo Santos · Crew interviews
Icon audit
Maya Chen · Harbour rebrand
Offline sync for tasks
Jonas Weber · Tideline mobile
Harbour homepage
Maya Chen · Harbour rebrand
Props
| Prop | Type | Required | Default |
|---|---|---|---|
axis | FloatingBubbleAxis | undefined | No | y |
magnetic | "x" | "y" | "xy" | undefined | No | — |
defaultOffset | FloatingBubbleOffset | undefined | No | { x: 0, y: 0 } |
offset | FloatingBubbleOffset | undefined | No | — |
onOffsetChange | ((offset: FloatingBubbleOffset) => void) | undefined | No | — |
className | string | undefined | No | — |
data-rebar-* attributes
data-rebar-component="floating-bubble".
Migrating to Ant Design
Ant Design (web) has no direct equivalent — this ports antd-*mobile*'s FloatingBubble. A migration typically hand-rolls the same pointer-drag-plus-magnetic-snap pattern, or drops the drag affordance for a fixed-position button if the design doesn't need it.