select-copy-button
Reactive icon

Select Copy Button

version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 9 May
 by 
4.0
 (3 ratings)
select-copy-button

Select Copy Button

Documentation
1.0.0

📌 Overview

Select Copy Button is a lightweight web component that enhances user interaction by enabling easy text copying. It's especially useful for:

  • Articles

  • Documentation

  • Code examples

  • FAQs or text-heavy UI blocks

This component allows users to select any part of text within a defined DOM container, then click a button that appears near the selection to copy the text to the clipboard.


⚙️ Features

  • 📋 Quick Copy: Automatically copies the selected text to clipboard

  • 🧠 Context-Aware: Button appears only when a valid text selection is made

  • 🎨 Customizable: Optional styles and position adjustments

  • ✅ Visual Feedback: Shows a "Copied!" message upon success (optional)


🚀 How It Works

  1. The user selects text inside a predefined DOM element

  2. copy button appears next to the text selection

  3. Clicking the button copies the selected text to the clipboard

  4. An optional "Copied!" message appears for visual confirmation