Ermine UI

Copy button

Copies some text to the clipboard and confirms that it did.

See it liveSource on GitHub

Install

If this is the first component in the project, set up once. This writes ermine.json and copies the theme stylesheet. The installation guide covers Vue, Nuxt and Astro.

npx ermineui init
pnpm dlx ermineui init
yarn dlx ermineui init
bunx ermineui init

Then add the component:

npx ermineui add copy-button
pnpm dlx ermineui add copy-button
yarn dlx ermineui add copy-button
bunx ermineui add copy-button

That copies 2 files into src/components/ui/copy-button/, and the 1 component it is built from. Files you already have are kept.

Use

import { CopyButton } from '@/components/ui/copy-button'
<script setup lang="ts">
import { CopyButton } from '@/components/ui/copy-button'
</script>

<template>
  <CopyButton />
</template>

In Nuxt, with the auto-import setting, the tags work in templates without the import. In Astro, use it inside a Vue island. The props are documented in the source below, on each one.

What gets copied

FileWhere it goes
CopyButton.vuesrc/components/ui/copy-button/CopyButton.vue
index.tssrc/components/ui/copy-button/index.ts

It is built from: Button. These are added with it.

The folders are the suggested ones. ermine.json says where yours are.

Source

This is exactly what the command copies. To install by hand, create each file below and the helpers listed above.

CopyButton.vue 75 lines
<script setup lang="ts">
import { onBeforeUnmount, ref } from 'vue'
import { Button } from '../button'

const props = withDefaults(
  defineProps<{
    /** The text to copy. */
    value: string
    /** Accessible name, and the visible text when you give the button a label via the slot. */
    label?: string
    /** Announced, and shown, for a moment after copying. */
    copiedLabel?: string
    variant?: 'default' | 'secondary' | 'outline' | 'ghost'
    size?: 'sm' | 'md' | 'icon'
  }>(),
  { label: 'Copy', copiedLabel: 'Copied', variant: 'ghost', size: 'icon' },
)

const emit = defineEmits<{
  copy: [value: string]
  /** The browser refused: no permission, or the page is not served over https. */
  error: [error: unknown]
}>()

const copied = ref(false)
let timer: ReturnType<typeof setTimeout> | undefined

async function copy() {
  try {
    await navigator.clipboard.writeText(props.value)
    copied.value = true
    emit('copy', props.value)
    clearTimeout(timer)
    timer = setTimeout(() => (copied.value = false), 2000)
  } catch (error) {
    emit('error', error)
  }
}

onBeforeUnmount(() => clearTimeout(timer))
</script>

<template>
  <Button class="er-copy-button" :variant="variant" :size="size" :aria-label="size === 'icon' ? label : undefined" :data-copied="copied ? '' : undefined" @click="copy">
    <svg v-if="copied" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M20 6 9 17l-5-5" />
    </svg>
    <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <rect x="9" y="9" width="11" height="11" rx="2" />
      <path d="M5 15V6a2 2 0 0 1 2-2h9" />
    </svg>
    <template v-if="size !== 'icon'">{{ copied ? copiedLabel : label }}</template>
    <!-- The icon swap is silent, so the confirmation is also said aloud. -->
    <span class="er-copy-button-status" role="status">{{ copied ? copiedLabel : '' }}</span>
  </Button>
</template>

<style>
@layer components {
  .er-copy-button[data-size='icon'] {
    width: 2rem;
    height: 2rem;
  }

  .er-copy-button-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
</style>
index.ts 3 lines
/** Copy button — copies some text to the clipboard and confirms that it did. */
export { default as CopyButton } from './CopyButton.vue'