Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA ring of actions that appears around selected text (Copy, Highlight, Comment, Search), opens from the pointer or with Ctrl or Cmd+period, restores the selection when closed and passes the selected text to the action. Use this when reading views offer quick actions on a selection.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it in readers, docs and review tools, where people select a phrase to copy, highlight or comment on it and a floating ring is quicker than a toolbar at the top of the page.
Do not use it when the text is editable. Editors have their own bubble toolbars with formatting commands.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
actions | { id, label, icon }[] | - | What the ring offers. |
onAction | (action, text: string) => void | - | Runs with the selected text. |
children | ReactNode | - | The readable content. |
size | number | 160 | Ring diameter in pixels. |
Select text, then press Ctrl+period for actions; the ring is a menu of menuitems named by their labels.Highlight applied to “the selected text” is announced politely (shortened to 60 characters).The pattern ships with a Testing Library test (selection-toolbar-ring.test.tsx) that covers opening on the shortcut with a selection, passing the text, Escape restoring the selection and ignoring empty selections.