Floating Components

Positioning, sizing, drag handles, and floating action buttons

Position Selector

Click a position on the grid to move the floating card

top-right

Current position:

top-right

Size Controls

Resize the floating element using the controls below

medium

Draggable Demo

A floating card with a drag handle for repositioning

Drag Handle

Floating Panel

Click and hold the drag handle above to activate the dragging state.

Idle
Hold the grip icon to simulate drag
Floating Action Button

Expandable FAB widget with quick actions

Collapsed
Click the floating button to toggle actions