Copy box

Stable

Combines a read-only text box with a copy button.

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

const text = 'Text to be copied'
const name = 'Example Copy Box'
</script>
<template>
  <HCopyBox
    :name
    :text
  />
</template>

Examples

Additional button

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

const text = 'Text to be copied'
const name = 'Example Copy Box'
</script>
<template>
  <HCopyBox
    :name
    :text
  >
    <template #additionalButtons>
      <HButton
        type="tertiary-default"
        icon="redo"
        size="md"
        unified
      />
    </template>
  </HCopyBox>
</template>

Multi-line

<script setup lang="ts">
import { HCopyBox } 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 = 'Example Copy Box'
</script>
<template>
  <HCopyBox
    :name
    :text
    multiline
  >
    <template #additionalButtons>
      <HButton
        type="secondary-default"
        icon="redo"
        size="md"
        unified
      />
    </template>
  </HCopyBox>
</template>

Icon

Use the icon prop to display a leading icon inside the box.

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

const text = 'Text to be copied'
const name = 'Example Copy Box'
</script>
<template>
  <HCopyBox
    :name
    :text
    icon="link"
  />
</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
text	string = ""
autoSelect	boolean
selectOnClick	boolean = true
name	string = ""
textClass	string = ""
hideCopyBtn	boolean
customCopyText	string
multiline	boolean = false
icon	"function" | "address-card" | "adls2" | "ai-chat-insights" | "ai-mascot-color" | "ai-mascot-disabled" | "ai-mascot-glasses-color" | "ai-mascot" | "ai-monitor-hai-sparkle" | ... 469 more ...

Events

Name	Parameters	Description
@copied	[content: string]

Slots

Name	Scoped	Description
#default	{ text: string; }
#additionalButtons	{}
#copy-button-content	{ showText: boolean; copyText: () => Promise<void>; }