CopyButton

Copies a value to the clipboard and briefly confirms with a check icon. Use size (xs, sm, md, lg, xl) to change density.

Jump to API reference

Import

Vue

import { UiCopyButton } from '@ziyarago/ui/vue'

Default

Vue

<UiCopyButton value="BK-2026-0412" />

Custom label

Vue

<UiCopyButton
  value="https://ziyarago.com/t/umrah-14"
  label="Copy link"
  variant="secondary"
 />

<UiCopyButton
  value="BK-2026-0412"
  label="Copy ID"
  variant="ghost"
  size="md"
 />

Sizes

Vue

<UiCopyButton value="BK-2026-0412" size="xs" />

<UiCopyButton value="BK-2026-0412" size="sm" />

<UiCopyButton value="BK-2026-0412" size="md" />

<UiCopyButton value="BK-2026-0412" size="lg" />

<UiCopyButton value="BK-2026-0412" size="xl" />

API reference

Button that copies a value to the clipboard and briefly confirms with a check icon, or reports a failure.

Props

PropType and valuesDefaultDescription

valuerequiredstring—Text copied to the clipboard.

labelstring—Button text. Defaults to "Copy", then "Copied" for 1.5s after a click.

variantprimarysecondaryghostdangerinversetonaloutlinedtextelevated'secondary'Button variant, same values as Button.

sizexssmmdlgxl'sm'Button size.

Events

Vue: @name. React: onName.

copyCalled with the value after it was written to the clipboard.

errorCalled with the error when the clipboard is unavailable or rejects the write. The button turns red with "Copy failed" for 1.5s.

Notes

Needs a secure context (https or localhost) for navigator.clipboard. The result ("Copied" or "Copy failed") is announced through an aria-live region.