FloatButton
A floating interactive trigger positioned over page content for primary actions, navigation, or menus.
Controls
import { FloatButton, FloatButtonGroup } from "raft-ui";
<FloatButton icon={<Plus />} />FloatButton Props
variantdefault: "default""default" | "primary" | "accent" | "outline" | "ghost" | "warning" | "danger"
Action semantics following design system tokens and themes.
shapedefault: "circle" (or "pill" when text children provided)"circle" | "square" | "pill"
Shape of the button. Circle (icon), square (icon/desc), or pill (with text).
sizedefault: "md""xs" | "sm" | "md" | "lg"
Size dimensions (xs = 24px, sm = 28px, md = 32px, lg = 36px).
iconReactNode
Primary icon element.
descriptionReactNode
Sub-label text rendered underneath the icon.
tooltipReactNode
Built-in Tooltip content rendered via raft-ui Tooltip.
positiondefault: "fixed" (or unpositioned if inside group)"fixed" | "absolute" | "relative"
CSS position strategy.
sidedefault: "bottom-right""bottom-right" | "bottom-left" | "top-right" | "top-left"
Corner placement for positioned buttons.
offsetdefault: 16number | string | [number | string, number | string]
Distance from viewport edges [x, y] or uniform value.
renderReactElement | (props, state) => ReactElement
Base UI render composition prop.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "primary" | "accent" | "outline" | "ghost" | "warning" | "danger" | "default" | Action semantics following design system tokens and themes. |
shape | "circle" | "square" | "pill" | "circle" (or "pill" when text children provided) | Shape of the button. Circle (icon), square (icon/desc), or pill (with text). |
size | "xs" | "sm" | "md" | "lg" | "md" | Size dimensions (xs = 24px, sm = 28px, md = 32px, lg = 36px). |
icon | ReactNode | — | Primary icon element. |
description | ReactNode | — | Sub-label text rendered underneath the icon. |
tooltip | ReactNode | — | Built-in Tooltip content rendered via raft-ui Tooltip. |
position | "fixed" | "absolute" | "relative" | "fixed" (or unpositioned if inside group) | CSS position strategy. |
side | "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-right" | Corner placement for positioned buttons. |
offset | number | string | [number | string, number | string] | 16 | Distance from viewport edges [x, y] or uniform value. |
render | ReactElement | (props, state) => ReactElement | — | Base UI render composition prop. |
FloatButtonGroup Props
directiondefault: "vertical""vertical" | "horizontal"
Flex layout direction for child float buttons.
attacheddefault: falseboolean
Whether child buttons are seamlessly attached without gaps.
shapedefault: "circle""circle" | "square" | "pill"
Shape styling for container and corner radii.
positiondefault: "fixed""fixed" | "absolute" | "relative"
CSS position strategy for the group container.
sidedefault: "bottom-right""bottom-right" | "bottom-left" | "top-right" | "top-left"
Corner placement for the group container.
offsetdefault: 16number | string | [number | string, number | string]
Distance from edges [x, y] or uniform value.
gapnumber | string
Custom spacing between buttons when not attached.
| Prop | Type | Default | Description |
|---|---|---|---|
direction | "vertical" | "horizontal" | "vertical" | Flex layout direction for child float buttons. |
attached | boolean | false | Whether child buttons are seamlessly attached without gaps. |
shape | "circle" | "square" | "pill" | "circle" | Shape styling for container and corner radii. |
position | "fixed" | "absolute" | "relative" | "fixed" | CSS position strategy for the group container. |
side | "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-right" | Corner placement for the group container. |
offset | number | string | [number | string, number | string] | 16 | Distance from edges [x, y] or uniform value. |
gap | number | string | — | Custom spacing between buttons when not attached. |