Selection toolbar

01Preview

Select text in the lesson with a mouse, a finger or the keyboard. Change the controls to try each option.

<article ref={lessonRef}>…lesson text…</article>
<SelectionToolbar
  container={lessonRef}
  onAddToNotes={(text) => addNote(text)}
  onAskAI={(text) => askTutor(text)}
/>

02Installation

pnpm add @nuton/ui @nuton/tokens

npm install @nuton/ui @nuton/tokens

yarn add @nuton/ui @nuton/tokens

import '@nuton/tokens/tokens.css'
import '@nuton/ui/styles.css'

03Usage

import { SelectionToolbar } from '@nuton/ui'

const lessonRef = useRef<HTMLElement>(null)

<article ref={lessonRef}>{lesson}</article>
<SelectionToolbar
  container={lessonRef}
  onAddToNotes={(text) => saveNote(text)}
  onAskAI={(text) => openTutorWith(text)}
/>

• Put SelectionToolbar next to the text and pass the text's element (or a ref) as container. It shows only for selections that start and end inside it.
• onAddToNotes and onAskAI add the two standard actions. For anything else, pass actions: each has a label, an optional Remix icon, onSelect(text, selection) and an optional confirmation to announce.
• The toolbar closes after an action and clears the selection. If the action opens something, such as the AI Tutor composer, move focus there in onSelect.
• Keep it to two or three short actions. It sits over the text people are reading.
• Give keyboard users another route to the same actions too, such as an “Ask about this passage” button: selecting static text with a keyboard needs caret browsing (F7).

04Variants and sizes

Actions

The default pair or one action. For your own set (the Preview playground has “study actions”), pass actions.

<SelectionToolbar container={ref} onAddToNotes={addNote} onAskAI={askTutor} />
<SelectionToolbar container={ref} onAddToNotes={addNote} />

Placement

auto (default) puts the toolbar above the first line of the selection, as in Figma. After a touch selection it goes below the last line, so the phone's own copy menu (which sits above) stays visible. It flips side when there is no room, stays 12px inside the viewport and follows scrolling and resizing. Force a side with placement="above" or "below".

Measurements

05States and interactions

Component tokens

Set on .nu-selection-toolbar. Colours come from the Text editor toolbar tokens (--nu-text-editor-toolbar-bg, --nu-text-editor-item-*).

06Composition examples

Save highlights to notes

Select text and choose Add to notes. The note appears in the list and “Added to notes” is announced.

const [notes, setNotes] = useState<string[]>([])

<article ref={lessonRef}>{lesson}</article>
<section aria-labelledby="notes-title">
  <h4 id="notes-title">My notes</h4>
  <ul>{notes.map((n) => <li key={n}>{n}</li>)}</ul>
</section>
<SelectionToolbar container={lessonRef} onAddToNotes={(text) => setNotes((list) => [...list, text])} />

Inside a scrolling area

The toolbar follows the selection while the area scrolls, and hides while the selection is scrolled out of sight.

<div ref={areaRef} className="lesson-scroll" tabIndex={0} role="region" aria-label="Lesson text (scrolls)">
  {paragraphs}
</div>
<SelectionToolbar container={areaRef} onAddToNotes={addNote} />

With the AI Tutor

In Chat, Ask AI Tutor fills the composer's “Asking about” card (ChatContextCard) and moves focus to the composer. Inside a Modal or Sheet, pass the dialog element as portalContainer so the toolbar stays inside its focus trap.

07API reference

SelectionToolbar props

The selection argument has text, a copy of the range, its rect and the container.

Accessibility

You must: name the actions clearly, move focus in actions that open something, give keyboard users another route to the same actions, and set portalContainer inside dialogs.

Figma mapping

08Guidelines and related components

Do and don't

Related components

• ChatThe AI Tutor composer and its “Asking about” card.
• Text editorThe toolbar this one is built on.
• PopoverFor richer content anchored to a button.