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