Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Getting started
Github Primer
Primer UI
Pro
Components
Action Bar
Action List
Action Menu
Anchored Overlay
Autocomplete
Avatar
Avatar Pair
Avatar Stack
Banner
Blankslate
Border Box
Box
Branch Name
Breadcrumbs
Button
Button Group
Button Marketing
Checkbox
Checkbox Group
Circle Badge
Circle Octicon
Clipboard Copy
Clipboard Copy Button
Close Button
Comment Box
Counter Label
Data Table
Details
Dialog
Form Control
Header
Heading
Hidden Text Expander
Icon
Icon Button
Image
Inline Message
Label
Label Group
Layout
Link
Markdown
Nav List
Octicon Symbols
Overlay
Page Header
Page Layout
Pagehead
Pagination
Pointer Box
Popover
Progress Bar
Radio
Radio Group
Relative Time
Segmented Control
Select
Selectpanel
Skeleton Avatar
Skeleton Box
Skeleton Text
Spinner
Split Page Layout
Stack
State Label
Subnav
Tab Container
Tab Nav
Tab Panels
Text
Text Input
Text Input With Tokens
Textarea
Timeline
Timeline Item
Toggle Switch
Token
Tooltip
Tree View
Truncate
Underline Nav
Underline Panels
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path> <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </button> <span class="copy-feedback">Copied!</span> </div> </div> <!-- Input field copy --> <div class="mb-4"> <h4 class="h4 mb-2">Input field copy</h4> <div class="clipboard-copy-container"> <input type="text" class="form-control" id="input1" value="https://github.com/primer/css" readonly style="width: 300px;"> <button class="copy-button" onclick="copyInputValue(''input1'', this)" title="Copy to clipboard"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path> <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </button> <span class="copy-feedback">Copied!</span> </div> </div> <!-- Code block copy --> <div class="mb-4"> <h4 class="h4 mb-2">Code block copy</h4> <div class="position-relative"> <pre class="bg-gray-light p-3 border rounded-2" style="position: relative;"><code id="code1">git clone https://github.com/primer/css.gitcd cssnpm installnpm run build</code></pre> <button class="copy-button position-absolute" style="top: 8px; right: 8px;" onclick="copyToClipboard(''code1'', this)" title="Copy code"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path> <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </button> <span class="copy-feedback position-absolute" style="top: 8px; right: 40px;">Copied!</span> </div> </div> </div> <!-- Accessibility Section --> <h2 class="h2 mb-3">Accessibility</h2> <h3 class="h3 mb-2">Known accessibility issues (GitHub staff only)</h3> <p> <a href="#" class="Link">ClipboardCopy accessibility link</a> </p> <!-- Usage Guidelines --> <div class="mt-4"> <h3 class="h3 mb-2">Usage Guidelines</h3> <ul class="ml-4"> <li>Always provide clear visual feedback when content is copied</li> <li>Include appropriate ARIA labels for screen readers</li> <li>Ensure the copy button is keyboard accessible</li> <li>Use semantic HTML elements for better accessibility</li> </ul> </div> <script> function copyToClipboard(elementId, button) { const element = document.getElementById(elementId); const text = element.textContent || element.innerText; navigator.clipboard.writeText(text).then(function() { showCopyFeedback(button); }).catch(function(err) { console.error(''Could not copy text: '', err); // Fallback for older browsers fallbackCopyTextToClipboard(text, button); }); } function copyInputValue(inputId, button) { const input = document.getElementById(inputId); input.select(); input.setSelectionRange(0, 99999); // For mobile devices navigator.clipboard.writeText(input.value).then(function() { showCopyFeedback(button); }).catch(function(err) { console.error(''Could not copy text: '', err); // Fallback document.execCommand(''copy''); showCopyFeedback(button); }); } function fallbackCopyTextToClipboard(text, button) { const textArea = document.createElement("textarea"); textArea.value = text; textArea.style.position = "fixed"; textArea.style.left = "-999999px"; textArea.style.top = "-999999px"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { document.execCommand(''copy''); showCopyFeedback(button); } catch (err) { console.error(''Fallback: Oops, unable to copy'', err); } document.body.removeChild(textArea); } function showCopyFeedback(button) { const feedback = button.nextElementSibling; if (feedback && feedback.classList.contains(''copy-feedback'')) { feedback.classList.add(''show''); setTimeout(() => { feedback.classList.remove(''show''); }, 2000); } } </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">