Clipboard
A component to copy text to the clipboard
Anatomy
To set up the Clipboard correctly, you'll need to understand its anatomy and how we name its parts.
Each part includes a
data-partattribute to help identify them in the DOM.
Examples
Learn how to use the Clipboard component in your project. Let's take a look at the most basic
example:
import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
import { Clipboard } from '@ark-ui/react'
export const Basic = () => {
return (
<Clipboard.Root value="https://ark-ui.com">
<Clipboard.Label>Copy this link</Clipboard.Label>
<Clipboard.Control>
<Clipboard.Input />
<Clipboard.Trigger>
<Clipboard.Indicator copied={<CheckIcon />}>
<ClipboardCopyIcon />
</Clipboard.Indicator>
</Clipboard.Trigger>
</Clipboard.Control>
</Clipboard.Root>
)
}
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'
import { Clipboard } from '@ark-ui/solid'
export const Basic = () => {
return (
<Clipboard.Root value="https://ark-ui.com">
<Clipboard.Label>Copy this link</Clipboard.Label>
<Clipboard.Control>
<Clipboard.Input />
<Clipboard.Trigger>
<Clipboard.Indicator copied={<CheckIcon />}>
<ClipboardCopyIcon />
</Clipboard.Indicator>
</Clipboard.Trigger>
</Clipboard.Control>
</Clipboard.Root>
)
}
<script setup lang="ts">
import { Clipboard } from '@ark-ui/vue'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-vue-next'
</script>
<template>
<Clipboard.Root value="https.//ark-ui.com">
<Clipboard.Label>Copy this link</Clipboard.Label>
<Clipboard.Control>
<Clipboard.Input />
<Clipboard.Trigger>
<Clipboard.Indicator>
<ClipboardCopyIcon />
<template #copied>
<CheckIcon />
</template>
</Clipboard.Indicator>
</Clipboard.Trigger>
</Clipboard.Control>
</Clipboard.Root>
</template>