Floating Controls

Modular action bar with configurable slots and dividers for tool chrome.

Installation

Add this item from the registry, or import it from the package after installing Default File UI.

Registry path

itsvigneshv/default-file-ui/floating-controls

Package import

import { FloatingControls, FloatingControlsItem, FloatingControlsDivider, FloatingControlsSlot } from "@default-file/ui/components/df-floating-controls"

Default

Surface bar with text actions and a divider after Reset.

Overlay

Always-dark glass for tool canvases. It does not follow light or dark page theme — use surface for themeable chrome.

Items API

Build the bar from an items array. Place dividers anywhere, swap divider content, or drop in custom nodes.

Properties

Modular action bar with items, dividers, and slots. Pass children or an items array.

FloatingControls

Prop	Type	Default	Notes
variant	"surface" \| "overlay"	"surface"	Bar surface treatment.
items	FloatingControlsEntry[]	—	Declarative entries (item, divider, slot). Ignored when children are passed.
children	ReactNode	—	Compose FloatingControlsItem, Divider, and Slot manually.
className	string	—	Additional styles on the bar.

FloatingControlsItem

Prop	Type	Default	Notes
leading	ReactNode	—	Leading icon or mark.
trailing	ReactNode	—	Trailing icon or mark.
tone	"ghost" \| "solid"	"ghost"	Item emphasis.
label / children	ReactNode	—	Item label content.
…button attributes	ButtonHTMLAttributes	—	Native button props (onClick, aria-label, etc.).

FloatingControlsDivider

Prop	Type	Default	Notes
children	ReactNode	—	Optional custom divider content; default is a rule.
className	string	—	Additional styles.

FloatingControlsSlot

Prop	Type	Default	Notes
children	ReactNode	—	Freeform slot for custom controls.
className	string	—	Additional styles.

items[] entry shapes

When using the declarative items prop.

Prop	Type	Default	Notes
Item entry	{ leading?, trailing?, tone?, label?, … }	—	Maps to FloatingControlsItem.
Divider entry	{ type: "divider", children? }	—	Inserts a divider between items.
Slot entry	{ type: "slot", children }	—	Inserts a custom slot.