Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Copy Button

One-click copy-to-clipboard button with confirmation.

Components Copy Button
input interactive
<arc-copy-button>

Overview

CopyButton provides a single-click interaction for copying a text value to the system clipboard. It renders as a compact button with a clipboard icon and a "Copy" label. When clicked, it calls the Clipboard API to write the `value` property to the clipboard, then transitions to a green checkmark "Copied!" confirmation state for two seconds before reverting to its default appearance. This gives users immediate visual feedback that the copy succeeded. The component is commonly paired with code blocks, API keys, URLs, and other text that users frequently need to paste elsewhere. Because it uses the async Clipboard API (`navigator.clipboard.writeText`), it requires a secure context (HTTPS or localhost). If the clipboard write fails — for example in a non-secure iframe — the error is caught silently and the button remains in its default state. CopyButton dispatches an `arc-copy` event on successful copy, carrying the copied value in the event detail. This lets parent components react to the copy — for example, showing a toast notification or logging the event. The button supports a `disabled` attribute that reduces opacity and prevents interaction, and all states (default, hover, focus, copied) are styled through ARC design tokens for consistent theming.

Guidelines

When to use

  • Place CopyButton adjacent to the content it copies — next to a code snippet, URL, or API key
  • Set the value property to the exact string the user expects to paste, not a formatted or truncated version
  • Use the arc-copy event to trigger a toast or analytics event confirming the copy action
  • Ensure the page is served over HTTPS so the Clipboard API is available
  • Use the disabled attribute when the value is not yet available (e.g. while loading)

When not to use

  • Do not use CopyButton for general-purpose actions — it is specifically designed for clipboard copy
  • Do not set the value to empty string and expect the button to be useful; always provide meaningful content
  • Do not override the 2-second confirmation timeout — it is calibrated for comfortable visual feedback
  • Do not nest CopyButton inside another button or interactive element, as this creates invalid HTML nesting
  • Do not rely solely on the confirmation state for feedback; pair with a toast for users who look away

Features

  • One-click copy to clipboard using the async Clipboard API
  • Visual confirmation state with green checkmark icon and "Copied!" label for 2 seconds
  • `arc-copy` custom event fired on successful copy with the value in the detail payload
  • Disabled state with reduced opacity and pointer-events: none
  • Focus-visible ring via var(`--focus-glow`) for keyboard accessibility
  • Hover state with elevated border and background color shift
  • Graceful fallback when the Clipboard API is unavailable (non-secure contexts)
  • Compact inline-flex layout that fits naturally next to code blocks and input fields

Preview

npm install @arclux/arc-ui

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-copy-button value="npm install @arclux/arc-ui"></arc-copy-button>
 
import { CopyButton } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <CopyButton value="npm install @arclux/arc-ui" />
  );
}
 
<script setup>
import { CopyButton } from '@arclux/arc-ui-vue';
</script>

<template>
  <CopyButton value="npm install @arclux/arc-ui" />
</template>
 
<script>
  import { CopyButton } from '@arclux/arc-ui-svelte';
</script>

<CopyButton value="npm install @arclux/arc-ui" />
 
import { Component } from '@angular/core';
import { CopyButton } from '@arclux/arc-ui-angular';

@Component({
  imports: [CopyButton],
  template: `
    <arc-copy-button value="npm install @arclux/arc-ui"></arc-copy-button>
  `,
})
export class MyComponent {}
 
import { CopyButton } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <CopyButton value="npm install @arclux/arc-ui" />
  );
}
 
import { CopyButton } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <CopyButton value="npm install @arclux/arc-ui" />
  );
}

API

value string ''
The text string to copy to the clipboard when the button is clicked.
disabled boolean false
Disables the button, preventing clicks and reducing visual opacity.

Events

arc-copy detail: { value: string }
Fired when text is successfully copied to the clipboard. `event.detail.value` contains the copied string.

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy