CopyToClipboard

One-click copy-to-clipboard component. When the user clicks and successfully copies, the button displays a physically pressed-down state with green badge feedback for 2 seconds.

Demo

Preview

变体

尺寸

Installation

pnpm dlx brutx-vue@latest add copy-to-clipboard

Usage

<script setup>
import { CopyToClipboard } from 'brutx-ui-vue'
</script>

<template>
    <CopyToClipboard text="pnpm install brutx-ui-vue" />
</template>

Custom Display Slot

The component provides a default slot that exposes the copied state (whether a copy was just successful), allowing you to customize various display formats of the button.

<script setup>
import { CopyToClipboard } from 'brutx-ui-vue'
</script>

<template>
    <CopyToClipboard text="Custom Text">
        <template #default="{ copied }">
            <span>{{ copied ? 'Copied!' : 'Click to copy' }}</span>
        </template>
    </CopyToClipboard>
</template>

Variants

Variant	Description
default	Default background with standard foreground text
primary	Primary (coral) background with high-contrast foreground
outline	Transparent background, retaining only border and shadow

<script setup>
import { CopyToClipboard } from 'brutx-ui-vue'
</script>

<template>
    <div class="flex flex-wrap items-center gap-3">
        <CopyToClipboard text="default" variant="default" />
        <CopyToClipboard text="primary" variant="primary" />
        <CopyToClipboard text="outline" variant="outline" />
    </div>
</template>

Sizes

Size	Description
sm	Small size, height h-9, padding px-3, font text-sm
default	Default size, height h-11, padding px-5, font text-base
lg	Large size, height h-14, padding px-7, font text-lg

<script setup>
import { CopyToClipboard } from 'brutx-ui-vue'
</script>

<template>
    <div class="flex flex-wrap items-center gap-3">
        <CopyToClipboard text="sm" size="sm" />
        <CopyToClipboard text="default" size="default" />
        <CopyToClipboard text="lg" size="lg" />
    </div>
</template>

API Reference

CopyToClipboard — Props

Name	Type	Default	Description
text Required	string	—	The text written to the clipboard when the user activates the copy action.
Details Declared type string Default value details Not declared — Source CopyToClipboard.vue:14 packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue
duration	number | undefined	2000	How long success or failure feedback remains visible, in milliseconds.
Details Declared type number | undefined Default value details Declaration DEFAULT_COPIED_DURATION Source: packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue Resolved value 2000 Source CopyToClipboard.vue:15 packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue
variant	"default" | "outline" | "primary" | undefined	"default"	Sets the copy button to the default, primary, or outline visual style.
Details Declared type NonNullable<"default" | "primary" | "outline" | null | undefined> | undefined Literal values "default" "outline" "primary" Default value details Declaration 'default' Source: packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue Resolved value "default" Source CopyToClipboard.vue:16 packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue
size	"default" | "lg" | "sm" | undefined	"default"	Sets the preset size of the copy button.
Details Declared type NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values "default" "lg" "sm" Default value details Declaration 'default' Source: packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue Resolved value "default" Source CopyToClipboard.vue:17 packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue
class	string | undefined	undefined	Custom CSS classes added to the copy button container.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue Resolved value undefined Source CopyToClipboard.vue:18 packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue
iconSize	IconSize | undefined	"md"	Sets the size of the copy and status icons.
Details Declared type IconSize | undefined Literal values "2xl" "lg" "md" "sm" "xl" "xs" Referenced types IconSize Type definition — IconSize export type IconSize = NonNullable<VariantProps<typeof iconSizeVariants>['size']> Default value details Declaration 'md' Source: packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue Resolved value "md" Source CopyToClipboard.vue:19 packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue

CopyToClipboard — Slots

Name	Signature or type	Description
#default	{ copied: boolean; failed: boolean; }	Customizes the copy button content; its scope exposes the copied success state and failed state of the most recent copy.
Details Declared type { copied: boolean; failed: boolean; } Source CopyToClipboard.vue packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue

Copy failure feedback

On a failed copy the default label switches to "Copy failed" (customizable by overriding the locale copyToClipboard.copyFailed) and enters a red destructive state; a visually-hidden role="status" live region announces success/failure to screen readers. The failure feedback lasts as long as the success feedback, both controlled by duration; if a copy succeeds again while the failure feedback is showing, the failed state is cleared immediately and the button switches back to the success feedback.

<script setup>
import { CopyToClipboard } from 'brutx-ui-vue'
</script>

<template>
    <CopyToClipboard text="Custom Text">
        <template #default="{ copied }">
            <span>{{ copied ? 'Copied!' : 'Click to copy' }}</span>
        </template>
    </CopyToClipboard>
</template>

Accessibility

• Keyboard: Supports Enter / Space to trigger the copy operation
• ARIA Attributes: The button includes a text description of the copy state; success/failure is announced via a visually-hidden role="status" live region, perceivable by screen readers even when the button is not focused