Copy Button

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

Components

Copy Button

input

interactive

<arc-copy-button>

Overview

CopyButton copies a text value to the system clipboard in one click. 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. It is commonly paired with code blocks, API keys, URLs, and other text users 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 stays in its default state. CopyButton dispatches an `arc-copy` event on successful copy, carrying the copied value in the event detail. Parent components can react to the copy, for example by showing a toast or logging the event. The `disabled` attribute reduces opacity and prevents interaction, and all states (default, hover, focus, copied) are styled through ARC design tokens.

Guidelines

When to use

Place CopyButton adjacent to the content it copies, such as 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 for clipboard copy only
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; two seconds is long enough to notice
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
Fails silently when the Clipboard API is unavailable (non-secure contexts)
Compact inline-flex layout that sits 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

valuestring='': The text string to copy to the clipboard when the button is clicked.
labelstring='': Accessible name before copying, such as "Copy code". Defaults to "Copy to clipboard". After copying the name is "Copied".
disabledboolean=false: Disables the button, preventing clicks and reducing visual opacity.
iconOnlyboolean=false: Shows the icon alone in a round, borderless 30px button, for a toolbar or a header bar. The icon turns into a check for 1.4 seconds after copying.

Events

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

Copy Button

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight