Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA small toolbar that appears above text selected inside its content, keeps the selection while used and is reachable with Alt+F10.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for reading surfaces where people act on a passage: quote it, comment on it, translate it, look it up.
Do not use it where the same actions already exist as visible buttons, or for editable text that needs a full formatting bar.
| Prop | Type | Default | Description |
|---|---|---|---|
actions | { id, label, icon?, onSelect(text) }[] | - | Toolbar buttons. onSelect receives the selected text. |
label | string | Selection actions | Accessible name of the toolbar. |
children | ReactNode | - | The selectable content. |
role="toolbar" and a label; the content advertises aria-keyshortcuts="Alt+F10".| Key | Action |
|---|---|
| Select text (mouse or Shift+Arrows) | shows the toolbar |
| Alt+F10 | moves focus into the toolbar |
| ArrowLeft / ArrowRight | move along the toolbar |
| Escape | closes it and returns focus to the text |
The component ships a Testing Library test (selection-popover.test.tsx) that covers showing for in-content selections, ignoring others, passing the text, keeping the selection and Alt+F10 / Escape.