Floating ToolbarPro

A floating toolbar whose tools grow into a field inside it: Link widens the bar into a URL field while the other tools step back, and narrows back when done.

Installation

When to use

Over a text selection in an editor, or over a selected row: a few tools where the work is, without a menu.
Tools that need a word or a link: the field opens inside the toolbar, so nothing else covers the text.

When not to use

A toolbar that's always there at the top of an editor: a fixed bar (Button Group, Toggle Group) is steadier.
Many tools: past seven or so, a menu or a command palette finds them faster.

Usage

Floating Toolbar with your own data: a whole component you can paste as a page.

example.tsx

1"use client"
2
3import { FloatingToolbar } from "@/components/dashral/pro/floating-toolbar"
4
5import { useState } from "react"
6import { Bold, Italic, Link2 } from "lucide-react"
7
8export default function SelectionTools() {
9  const [bold, setBold] = useState(false)
10  const [italic, setItalic] = useState(false)
11  const [link, setLink] = useState<string | undefined>()
12  return (
13    <FloatingToolbar
14      tools={[
15        { id: "bold", label: "Bold", icon: <Bold />, shortcut: ["mod", "B"], active: bold, onClick: () => setBold(!bold) },
16        { id: "italic", label: "Italic", icon: <Italic />, shortcut: ["mod", "I"], active: italic, onClick: () => setItalic(!italic) },
17        {
18          id: "link",
19          label: "Link",
20          icon: <Link2 />,
21          active: !!link,
22          group: "insert",
23          field: { type: "url", placeholder: "Paste a link", value: link, onSubmit: setLink, onRemove: () => setLink(undefined) },
24        },
25      ]}
26    />
27  )
28}

API reference

FloatingToolbar

A floating toolbar: tools along one pill with a gliding highlight and their names above; a tool with a field (Link, Comment) widens the bar into that field, in place, and back when it's applied or left.

Prop	Type	Default
`tools`	`ToolbarTool[]` Required.	—
`open`	`boolean` Shown or not (a selection there or not); it fades and settles in place.	`true`
`label`	`string` Named for screen readers; "Formatting" by default.	`"Formatting"`
`fieldWidth`	`number` A field's width, in px (never wider than the screen).	`320`
`onEscape`	`() => void` Escape on the tools (not in a field): close it, put the focus back in the text.	—
`className`	`string`	—
`classNames`	`FloatingToolbarClassNames`	—

type ToolbarField

Prop	Type	Default
`placeholder`	`string`	—
`value`	`string` What it starts with (the link already there).	—
`type`	`"text" \| "url"`	—
`submitLabel`	`string` The button that applies it; a check by default.	—
`onSubmit`	`(value: string) => void`	—
`onRemove`	`() => void` Adds a remove button (unlink, delete the comment).	—

type ToolbarTool

Prop	Type	Default
`id`	`string`	—
`label`	`string`	—
`icon`	`React.ReactNode`	—
`shortcut`	`string[]` Shown in its name above it (["mod", "B"]). Shown only: wire the keys in your editor.	—
`active`	`boolean` On (bold already applied): pressed, and drawn so.	—
`onClick`	`() => void`	—
`field`	`ToolbarField` Or a field it grows into, inside the toolbar.	—
`group`	`string` Tools of the same group sit together; a line separates groups.	—
`disabled`	`boolean`	—

type FloatingToolbarClassNames

Prop	Type	Default
`root`	`string`	—
`bar`	`string`	—

Keyboard

Keys	Action
`Tab`	Reach the toolbar (one stop)
`←`or`→`	Along the tools
`Home`or`End`	The first or last tool
`Enter`or`Space`	Use the tool, or open its field
`Enter`	In a field: apply it, back to the tools
`Esc`	In a field: back to its tool; on the tools: onEscape (close, back to the text)

Accessibility

A toolbar (role toolbar, horizontal) named by label, with one tab stop and roving focus; each tool is named, a toggle reports aria-pressed, a tool with a field says it opens one.
A field is a group named after its tool; its input, Apply, Remove and Back to the tools are all named, and the focus returns to the tool after.
A tool's name and keys show above it on hover or focus; its keys are in aria-keyshortcuts.

Motion

It appears settling up 6px with a fade, and leaves the same way.
Opening a field, the tools step back (a fade, to 97%, a 2px blur) while the bar's width tweens to the field's (0.38 s) and the field slides in; closing, the reverse.
One highlight glides along the tools, and the name above follows it. Smooth tweens on [0.4, 0, 0.2, 1], never springs, except the small press on Apply. With reduced motion it only fades.