# SelectionToolbarPrimitive URL: /docs/api-reference/primitives/selection-toolbar A floating toolbar that appears when text is selected within a message. A floating toolbar that appears near the user's text selection within a message. Used to provide contextual actions like quoting selected text. Anatomy \[#anatomy] ```tsx import { SelectionToolbarPrimitive } from "@assistant-ui/react"; const FloatingSelectionToolbar = () => ( Quote ); ``` Place this component inside `ThreadPrimitive.Root`: ```tsx ... ``` API Reference \[#api-reference] Root \[#root] A floating container that renders as a portal positioned above the text selection. Only renders when there is a valid text selection within a single message. This primitive renders a `
` element. **Behavior:** * Listens for `mouseup` and `keyup` events to detect completed selections * Validates the selection is within a single message using `data-message-id` attributes * Renders a portal with `position: fixed`, centered above the selection * Prevents `mousedown` from clearing the text selection when clicking the toolbar * Hides automatically on scroll or when the selection is cleared * Cross-message selections are ignored Quote \[#quote] A button that captures the currently selected text and sets it as a quote in the thread composer. This primitive renders a `