Copy Button

Accessible, unstyled clipboard copy button primitive.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { CopyButton } from "@vizejs/ui/copy-button";

Or copy the source into your project with vize lib pull copy-button (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Copies an invite link to the clipboard and announces the copied state in its label. -->
<script setup lang="ts">
import { ref, useId } from "vue";

import { CopyButton } from "@vizejs/ui/copy-button";

const inviteLink = "https://example.com/invite/team-alpha";
const linkId = useId();
const lastCopied = ref("");
</script>

<template>
  <div>
    <code :id="linkId">{{ inviteLink }}</code>
    <CopyButton
      :value="inviteLink"
      idle-label="Copy invite link"
      copied-label="Invite link copied"
      error-label="Could not copy"
      :aria-describedby="linkId"
      @copy="(value) => (lastCopied = value)"
    />
    <p aria-live="polite">{{ lastCopied ? "Link is on your clipboard." : "" }}</p>
  </div>
</template>

API

CopyButton

Source: src/families/actions/copy-button/copy-button.vue

Props

Events

Slots

Exposed

Behavior

Normative state × input → outcome table for copy-button.vue.

Contract

CopyButton is a headless action primitive for copying one plain string value. It intentionally owns only a narrow clipboard write: the default writer calls navigator.clipboard.writeText(value) at activation time, and tests or SSR consumers may inject a writer prop. Component setup, SSR rendering, and hydration do not access navigator, window, timers, or document globals.

The result state is closed to idle, copied, and error. Disabled and in-flight writes are separate availability hooks through data-disabled, data-writing, aria-disabled, aria-busy, slot state, and the public expose contract. In-flight writes preserve focus rather than applying native disabled.

The rendered DOM exposes part="root" on the host and part="label" on the fallback label span. Stable selectors are data-vize-ui="copy-button" and data-vize-ui="copy-button-label". No CSS classes, runtime styles, CSS custom properties, runtime CSS-in-JS, or copied value data attributes are emitted; all visual styling remains consumer-owned.