The <luna-copy-button> component copies text to the clipboard from a target element or direct value with visual feedback.
Paths
/lunadom/components/copy-button/copy-button.js REQUIRED
/lunadom/components/tooltip/tooltip.js REQUIRED
Basic Usage
Copy Text
Copy Email
Copy Command
Target Element
Copy from another element's value or textContent
Copy
Variants
Primary
Success
Warning
Danger
Neutral
Outline Style
Primary
Success
Warning
Danger
Sizes
Small
Medium
Large
Pill Style
Copy Pill
Copy Pill
Icon Only (Circle)
Custom Icon & Slots
States
Disabled
Loading
Customization
Slots
default - Button label text.
prefix - Content placed before the copy icon.
icon - Replaces the default copy SVG icon.
suffix - Content placed after the label.
Attributes
value - Literal text to copy when no 'target' is set.
target - ID of an element whose .value or textContent is copied.
tooltip - Hover tooltip text. Defaults to 'Copy to clipboard'.
success-text - Tooltip text shown after successful copy. Defaults to 'Copied!'.
variant - Visual color variant (primary, success, warning, danger, neutral). Defaults to neutral.
size - Size preset (sm, md, lg). Defaults to 'md'.
pill - Full pill border-radius.
circle - Equal width/height, ideal for icon-only use.
outline - Transparent fill, colored border and text.
disabled - Disables the button.
loading - Shows a spinner and disables interaction.
CSS Variables
--luna-copy-bg - Resting background color.
--luna-copy-color - Label and icon color.
--luna-copy-border - Border color.
--luna-copy-hover-bg - Hover background color.
--luna-copy-active-bg - Active/pressed background color.
--luna-copy-focus - Focus ring color.
--luna-copy-radius - Border radius override.
Events
luna-copy - Fired when text is successfully copied. detail: { text }
Example Code
<!-- Basic Usage -->
<luna-copy-button value="Hello, Luna!">Copy Text</luna-copy-button>
<!-- Target Element -->
<luna-input id="token" value="secret-key" readonly></luna-input>
<luna-copy-button target="token" variant="primary">Copy</luna-copy-button>
<!-- Variants -->
<luna-copy-button value="text" variant="primary">Primary</luna-copy-button>
<luna-copy-button value="text" variant="success">Success</luna-copy-button>
<luna-copy-button value="text" variant="warning">Warning</luna-copy-button>
<!-- Outline Style -->
<luna-copy-button value="text" variant="primary" outline>Outline</luna-copy-button>
<!-- Sizes -->
<luna-copy-button value="text" size="sm">Small</luna-copy-button>
<luna-copy-button value="text" size="md">Medium</luna-copy-button>
<luna-copy-button value="text" size="lg">Large</luna-copy-button>
<!-- Pill & Circle -->
<luna-copy-button value="text" pill>Pill Button</luna-copy-button>
<luna-copy-button value="text" circle tooltip="Copy"></luna-copy-button>
<!-- Custom Icon -->
<luna-copy-button value="npm install lunadom">
<span slot="icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M4 17l6-6-6-6M12 19h8"/>
</svg>
</span>
</luna-copy-button>
<!-- Prefix & Suffix Slots -->
<luna-copy-button value="email@example.com">
<span slot="prefix">📧</span>
Copy Email
</luna-copy-button>
<luna-copy-button value="API_KEY_123">
Copy Key
<span slot="suffix">🔑</span>
</luna-copy-button>
<!-- Custom Tooltips -->
<luna-copy-button
value="code"
tooltip="Copy to clipboard"
success-text="Copied successfully!"
>Copy</luna-copy-button>
<!-- States -->
<luna-copy-button value="text" disabled>Disabled</luna-copy-button>
<luna-copy-button value="text" loading>Loading</luna-copy-button>
<!-- Listen to copy event -->
<script>
const copyBtn = document.querySelector('luna-copy-button');
copyBtn.addEventListener('luna-copy', (e) => {
console.log('Copied:', e.detail.text);
});
</script>