Modular action strip for canvas toolbars and docks.
Also known as: floating toolbar, canvas action bar, tool action strip, overlay controls
Install with the CLI, or copy the component source into your project.
Add floating-controls (npm)
1npx --yes -p @default-file/ui df-ui add floating-controls
Surface bar with text actions and a divider after Reset.
Always-dark glass for tool canvases. It does not follow light or dark page theme. Use surface for themeable chrome.
Build the bar from an items array. Place dividers anywhere, swap divider content, or drop in custom nodes.
Bar inset from none to 2xl. Default keeps the standard bar inset.
Corner radius from none to full. Default is xl.
Modular action bar with items, dividers, and slots. Label ink is optically centered to cap height with text-box when available, and a 1cap line box otherwise. Pass children or an items array.
| Prop | Type | Default | Notes |
|---|---|---|---|
| variant | "surface" | "overlay" | "surface" | Bar surface treatment. |
| padding | "none" | "sm" | "default" | "lg" | "2xl" | "default" | Inner inset around the bar. |
| radius | "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "xl" | Corner radius of the bar. Maps to a --radius-* token. |
| 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. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| leading | ReactNode | - | Leading icon or mark. |
| trailing | ReactNode | - | Trailing icon or mark. |
| tone | "ghost" | "solid" | "ghost" | Item emphasis. |
| children | ReactNode | - | Item label content. |
| className | string | - | Additional styles on the item button. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Optional custom divider content; default is a rule. |
| className | string | - | Additional styles. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Freeform slot for custom controls. |
| className | string | - | Additional styles. |
Declarative item shape in the items array. Maps to FloatingControlsItem. Also accepts onClick, disabled, className, and aria-label.
| Prop | Type | Default | Notes |
|---|---|---|---|
| type | "item" | - | Optional. Omit or set item for a control entry. |
| key | string | - | Optional React key. |
| label | ReactNode | - | Entry label. Used when children is omitted. |
| children | ReactNode | - | Entry label content. Wins over label when both are set. |
| leading | ReactNode | - | Leading icon or mark. |
| trailing | ReactNode | - | Trailing icon or mark. |
| tone | "ghost" | "solid" | - | Item emphasis. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| type | "divider" | - | Marks a divider entry (required). |
| children | ReactNode | - | Optional custom divider content. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| type | "slot" | - | Marks a slot entry (required). |
| children | ReactNode | - | Slot content (required). |
Toolbar items share one tab stop. Arrow keys move focus between enabled FloatingControlsItem hosts. Home and End jump to the ends.
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --df-floating-controls-padding | CSS length | var(--df-floating-controls-padding-default) | Active bar inset. Resolved from the padding prop scale. |
| --df-floating-controls-radius | CSS length | var(--radius-xl) | Active bar corner radius. Resolved from the radius prop. |
| --df-floating-controls-padding-none | CSS length | 0 | Bar inset for padding none. |
| --df-floating-controls-padding-sm | CSS length | calc(0.5 * var(--spacing-unit)) | Bar inset for padding sm. |
| --df-floating-controls-padding-default | CSS length | calc(1 * var(--spacing-unit)) | Bar inset for padding default. |
| --df-floating-controls-padding-lg | CSS length | calc(1.5 * var(--spacing-unit)) | Bar inset for padding lg. |
| --df-floating-controls-padding-2xl | CSS length | calc(2 * var(--spacing-unit)) | Bar inset for padding 2xl. |
| --overlay-bg | CSS color | color-mix(in oklch, black 50%, transparent) | Bar fill on the overlay variant. |
| --overlay-fg | CSS color | color-mix(in oklch, white 88%, transparent) | Bar label color on the overlay variant. |
| --overlay-border | CSS color | color-mix(in oklch, white 10%, transparent) | Bar border on the overlay variant. |
| --overlay-shadow | CSS shadow | var(--df-shadow-overlay) | Bar shadow on the overlay variant. |
| --overlay-blur | CSS length | var(--df-blur-overlay) | Backdrop blur on the overlay variant. |
| --overlay-item-fg | CSS color | color-mix(in oklch, white 82%, transparent) | Item label color at rest. |
| --overlay-item-fg-active | CSS color | white | Item label color when active. |
| --overlay-item-hover-bg | CSS color | color-mix(in oklch, white 10%, transparent) | Item fill on hover. |
| --overlay-item-on-bg | CSS color | color-mix(in oklch, white 12%, transparent) | Item fill when toggled on. |
| --overlay-solid-bg | CSS color | white | Bar fill on the surface variant. |
| --overlay-solid-fg | CSS color | oklch(0.2 0 0) | Bar label color on the surface variant. |
| --overlay-solid-hover-bg | CSS color | color-mix(in oklch, white 88%, oklch(0.85 0 0)) | Item fill on hover for the surface variant. |
| --overlay-divider | CSS color | color-mix(in oklch, white 15%, transparent) | Divider color between items. |
| --df-label-line-height | CSS line-height | var(--df-leading-none) | Line box for label flex centering. Defaults to --df-leading-none. When text-box is unavailable and the cap unit is supported, the kit sets this to 1cap so flex centering matches cap-height ink. |