Copy Button — ARC UI

Components

Copy Button

input

interactive

<arc-copy-button>

Overview

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

Use CopyButton for general-purpose actions -- it is specifically designed for clipboard copy
Set the value to empty string and expect the button to be useful; always provide meaningful content
Override the 2-second confirmation timeout -- it is calibrated for comfortable visual feedback
Nest CopyButton inside another button or interactive element, as this creates invalid HTML nesting
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';

<CopyButton value="npm install @arclux/arc-ui"></CopyButton>

<script setup>
import { CopyButton } from '@arclux/arc-ui-vue';
</script>

<template>
  <CopyButton value="npm install @arclux/arc-ui"></CopyButton>
</template>

<script>
  import { CopyButton } from '@arclux/arc-ui-svelte';
</script>

<CopyButton value="npm install @arclux/arc-ui"></CopyButton>

import { Component } from '@angular/core';
import { CopyButton } from '@arclux/arc-ui-angular';

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

import { CopyButton } from '@arclux/arc-ui-solid';

<CopyButton value="npm install @arclux/arc-ui"></CopyButton>

import { CopyButton } from '@arclux/arc-ui-preact';

<CopyButton value="npm install @arclux/arc-ui"></CopyButton>

API

Prop	Type	Default	Description
`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

Event	Description
`arc-copy`	Fired when text is successfully copied to the clipboard. `event.detail.value` contains the copied string.