Copy Button

Stable

Can add copied indicator

<script setup lang="ts">
import { HCopyButton } from '@holistics/design-system'

const text = `Lorem ipsum dolor sit amet consectetur adipiscing elit.
    Consectetur adipiscing elit quisque faucibus ex sapien vitae.
    Ex sapien vitae pellentesque sem placerat in id.
    Placerat in id cursus mi pretium tellus duis.
    Pretium tellus duis convallis tempus leo eu aenean.`

const name = 'Lorem ipsum'
</script>
<template>
  <HCopyButton
    :text-for-copy="text"
    :item-name="name"
  />
</template>

Examples

Async

<script setup lang="ts">
import { HCopyButton } from '@holistics/design-system'

const text = `Lorem ipsum dolor sit amet consectetur adipiscing elit.
    Consectetur adipiscing elit quisque faucibus ex sapien vitae.
    Ex sapien vitae pellentesque sem placerat in id.
    Placerat in id cursus mi pretium tellus duis.
    Pretium tellus duis convallis tempus leo eu aenean.`

const asyncText = () => new Promise<string>((resolve) => {
  setTimeout(() => resolve(text), 2000)
})

const name = 'Lorem ipsum'
</script>
<template>
  <HCopyButton
    :text-for-copy="asyncText"
    :item-name="name"
  />
</template>

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
textForCopy *	string | (() => Promise<string>)
type	"primary-highlight" | "secondary-default" | "tertiary-highlight" | "tertiary-default" | "primary-danger" | "tertiary-danger" | "primary-warning" | "primary-success" | "outline-danger" | ... 6 more ... = "tertiary-default"
icon	"function" | "cancel" | "copy" | "cut" | "error" | "pause" | "play" | "add-block" | "add-circle" | "add-filter" | "add-tag" | "add" | "address-card" | "adhoc-query" | "ai/file" | ... 448 more ... = "copy"
disabled	boolean = false
itemName	string = ""
tooltipPlacement	Placement = "top"
tooltip	string | null = null
showLabel	boolean = false
btnClass	string = ""
showCheckIcon	boolean = true

Events

Name	Parameters	Description
@copied	[text: string]

Slots

Name	Scoped	Description
#default	{ showText: boolean; copyText: () => Promise<void>; }