Annotation Toolbar Blueprint
Static open-state blueprint of a text-selection toolbar with comment, highlight, suggest-edit, and link affordances plus a five-color swatch row.
Static open-state blueprint of a text-selection toolbar with comment, highlight, suggest-edit, and link affordances plus a five-color swatch row.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Annotation Toolbar Blueprint is a static open-state rendering of the floating text-selection toolbar: the bar sits above a highlighted passage in a document surface ("Acme processes payment data in an isolated sub-processor environment"), with four icon buttons (Comment, Highlight, Suggest edit, Insert link) and five color swatches using chart tokens (chart-1 yellow through chart-5 red). The Highlight button is pressed. Below the document, a live comment thread between Priya Nair and Avery Stone with a reply affordance shows what the Comment action opens.
Actions and colors are typed arrays. Highlight colors use bg-chart-N/40 tokens so they adapt to light and dark mode without hardcoded color overrides; no Radix portal components are used anywhere.
Reach for this block to show the annotation UX to stakeholders or to document the toolbar shape before wiring up selection events. Connect it to a real selection listener and popover anchor once the static design is signed off.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the document review annotation bar. Other toolbar blueprints:
Tip: render the toolbar as a static blueprint first so the layout lands in screenshots and reviews before the selection-event wiring begins.