SelectionToolbar
StableA small bar that appears over highlighted text, with quick edits, a menu of more, and a box to ask for your own.
Also known as floating toolbar, bubble menu, text selection menu
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
The standard bar
Nothing chosen yet.
<SelectionToolbar onAction={(id) => run(id)} onAsk={(text) => ask(text)} onClose={() => hide()} />Tab once to enter the bar. Arrow keys move between controls. Escape closes it.
When to use it
A small bar of quick AI edits for highlighted text, with a menu of more and a box to ask for your own edit. It does not position itself, so it fits into any editor.
Made of: Quick edit buttons · More options menu · Ask AI to edit box · Send button
Use it for
- Rephrasing, shortening or changing the tone of highlighted text.
- Asking for a custom edit to a selection in your own words.
Not for
- Showing the result of an edit before it is applied: use SuggestionBar.
- Ideas for what to ask next in a chat: use SuggestionChips.
Do and avoid
Do
- Offer every action in a right-click menu and with a keyboard shortcut too.
- Show the result in a SuggestionBar, so nothing changes until it is chosen.
- Return the cursor to the text when the bar closes.
- Place the bar next to the highlighted text, because it does not position itself.
Avoid
- Do not show it only when pointing.
- Do not apply an edit straight from a button without a preview.
- Do not add more than four or five quick edits. Put the rest in the menu.
On a phone
- The bar wraps onto new rows. The Ask AI field is at least 192px wide and takes its own row when the chips fill the first.
- The More menu opens as a bottom sheet with a backdrop on phones, and its items are at least 44px tall.
- The ask field is 16px on touch screens, so the page does not zoom. The bar does no measuring, so place it clear of the system selection menu and the keyboard, and note that onClose only runs on Escape, which a phone does not have.
Seen in products
- Google Docs with Gemini shows a floating Refine bar with Rephrase and Shorten and a More options menu (Elaborate, More formal, More casual, Bulletize, Summarize).
- Notion lets you highlight text then choose Edit with AI, with a prompt such as fix grammar, make it shorter or change the tone.
- Apple Intelligence Writing Tools offers Proofread, Rewrite (Friendly, Professional, Concise) and Summarize (paragraph, key points, table, list) system-wide.
- Word Copilot has Draft with Copilot on selected text.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| presets | SelectionAction[] | Rephrase, Shorten, Change tone | Chips shown in the bar. Each has id, label and optional icon. |
| moreActions | SelectionAction[] | Elaborate, More formal, More casual, Bulletize, Summarize | Overflow menu items. An empty array hides the menu. |
| onAction | (id: string) => void | none | Called for a preset or menu item. |
| onAsk | (instruction: string) => void | none | Called with the typed instruction. The field clears after sending. |
| onClose | () => void | none | Called on Escape when the menu is closed. |
| label | string | "Edit selected text" | Accessible name of the toolbar. |
| moreLabel / askLabel / askPlaceholder / sendLabel | string | none | Copy and accessible names for the menu button, the field and the send button. |
| className | string | none | Extra classes on the bar. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- more open
- Pressing the more button, or Arrow Down on it, opens a menu of extra edits.
- empty instruction
- The send button is disabled until something is typed in the ask box.
- keyboard
- Left and right arrows move between controls and Escape calls onClose.
- hover
- Each preset button gets a soft background under the pointer.
Tokens
Change one of these and every part that uses it follows.
--surface-raised--surface--surface-sunken--border--shadow-md--radius-control--radius-field--radius-overlay
Built in
- Screen readers know it as a named toolbar laid out side to side.
- Tab stops once on the bar. Left and Right arrows, Home and End move between controls. In the text box, the arrows move the cursor first and leave the box only at its ends.
- The More options menu opens with Down or Up arrow and lands on the first item. Escape or Tab closes it and returns to its button.
- Escape closes the menu first. Pressing it again asks the bar to close.
- The More options button, the text box and the send button all have names for screen readers.
What you need to do
- Hide the bar and return focus to the text when onClose is called.
- Offer the same actions in a right-click menu and with a keyboard shortcut, because a floating bar is hard to reach.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide