# 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 `