A copy button is a button that easily enables the copy to clipboard pattern.
<nve-copy-button value="hello" aria-label="copy value" behavior-copy></nve-copy-button>
Installation
<script type="module">
import '@nvidia-elements/core/copy-button/define.js';
</script>
<nve-copy-button value="hello" aria-label="copy value" behavior-copy></nve-copy-button>
nve api.get nve-copy-button
Flat
Copy buttons with flat container styling, showing both enabled and disabled states. Ideal for inline usage where minimal visual impact matters.
<nve-copy-button container="flat" value="hello"></nve-copy-button>
<nve-copy-button container="flat" disabled value="hello"></nve-copy-button>
Behavior Copy
Copy button with behavior-copy attribute that automatically handles the copy functionality. Simplifies implementation by providing built-in copy behavior.
<nve-copy-button value="hello" behavior-copy></nve-copy-button>
Hint
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.
<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...
Icon
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 value="ssh://elements.git" aria-label="copy git branch" behavior-copy>
<nve-icon name="branch" slot="icon"></nve-icon>
</nve-copy-button>
Async Copy
Advanced pattern for handling long-running copy to clipboard operations.
<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>
Disabled
Copy button in disabled state. Useful for showing when copying is not available or when the user doesn't have permission to copy.
<nve-copy-button disabled value="hello"></nve-copy-button>
Size
Copy buttons in different sizes (small, default, large). Useful for adapting to different UI contexts and design requirements.
<nve-copy-button size="sm"></nve-copy-button>
<nve-copy-button></nve-copy-button>
<nve-copy-button size="lg"></nve-copy-button>
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release Docs Preview API Documentation Fully Themeable
beta Robust unit test coverages Passed API Review Passed Designer VQA Review Included in library package stable No known outstanding AA WCAG issues No known outstanding performance issues Adapts to different screen/container sizes No breaking API changes for at least 90 days