DefaultDisabledFlatBehaviorCopySizeHintIconAsyncCopyTooltipPositionOverride
<nve-copy-button value="hello" aria-label="copy value" behavior-copy></nve-copy-button>
Edit Example
A copy button is a button that easily enables the copy to clipboard pattern.
<nve-copy-button disabled value="hello"></nve-copy-button>
Edit Example
This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. MDN
Disabled Description true The element has a disabled state and does not accept interaction. false The element has an enabled state and accepts interaction.
<nve-copy-button container="flat" value="hello"></nve-copy-button>
<nve-copy-button container="flat" disabled value="hello"></nve-copy-button>
Edit Example
Copy buttons with flat container styling, showing both enabled and disabled states. Ideal for inline usage where minimal visual impact matters.
<nve-copy-button value="hello" behavior-copy></nve-copy-button>
Edit Example
Determines if the copy button should auto write to clipboard by the trigger.
BehaviorCopy Description true false
<nve-copy-button size="sm"></nve-copy-button>
<nve-copy-button></nve-copy-button>
<nve-copy-button size="lg"></nve-copy-button>
Edit Example
Controls the visual scale of an element to match its importance and available space.
Size Description sm Compact size for dense layouts or secondary elements with less visual prominence. md Standard size that works well in most contexts and provides balanced visibility. lg Larger size for emphasizing important elements or improving touch targets in spacious layouts.
<h2 nve-text="body lg" nve-layout="row align:vertical-center">
2d628479c...
<nve-copy-button
container="flat"
value="2d628479cf2db27cbdebbfe41a42f1c9e07c46a8"
aria-label="2d628479cf2db27cbdebbfe41a42f1c9e07c46a8"
behavior-copy
></nve-copy-button>
</h2>
2d628479c...
Edit Example
Copy button integrated with text content, showing how to copy truncated values like commit hashes. Perfect for code snippets, IDs, or other long text that users copy while viewing a shortened version.
<nve-copy-button value="ssh://elements.git" aria-label="copy git branch" behavior-copy>
<nve-icon name="branch" slot="icon"></nve-icon>
</nve-copy-button>
Edit Example
Copy button with custom icon in the icon slot. Customizes the button appearance while maintaining copy functionality. Useful for context-specific icons like git branches, URLs, or other specialized content.
<nve-copy-button id="async-copy-button" value="initial value" aria-label="copy value" behavior-copy></nve-copy-button>
<script type="module">
const button = document.querySelector("#async-copy-button");
button.addEventListener("pointerdown", () => {
button.disabled = true;
// do an async operation
new Promise((resolve) => setTimeout(resolve, 2000)).then(() => {
button.value = "async value";
button.disabled = false;
button.dispatchEvent(new Event("click"));
});
});
</script>
Edit Example
Advanced pattern for handling long-running copy to clipboard operations.
<style>
nve-copy-button.override-position-example {
&::part(tooltip-arrow) {
position-area: right center;
translate: -50% 0%;
transform: translate(-2px, 0) rotate(45deg);
}
}
</style>
<nve-copy-button
class="override-position-example"
value="hello"
aria-label="copy value"
behavior-copy
style="position: absolute; top: 12px; right: 12px"
></nve-copy-button>
Edit Example
Popover position override in a copy button.