CopyButton

Component

Props

Usage

textToCopy

The textToCopy prop defines the text that will be copied to the clipboard when the button is clicked.

 <template>
    <CopyButton textToCopy="This is the text to be copied!" />
</template>
 

• Type: string
• Required: true

copySuccessText

The copySuccessText prop defines the message displayed when the text is successfully copied to the clipboard.

It only works when showToast is set to true or when using the ButtonType.ACTION_BUTTON button type.

 <template>
    <CopyButton copySuccessText="Text copied successfully!" />
</template>
 

• Type: string
• Default: 'Copied to clipboard!'

copyErrorText

The copyErrorText prop defines the message displayed when there is an error copying the text to the clipboard.

It only works when showToast is set to true or when using the ButtonType.ACTION_BUTTON button type.

 <template>
    <CopyButton copyErrorText="Unable to copy text." />
</template>
 

• Type: string
• Default: 'Failed to copy to clipboard.'

showToast

The showToast prop determines whether a toast notification is displayed when the text is copied successfully or if there is an error.

 <template>
    <CopyButton showToast />
</template>
 

• Type: boolean
• Default: true

resetAfter

The resetAfter prop defines the time in milliseconds after which the button resets to its original state after a copy action.

 
<template>
    <CopyButton :resetAfter="2000" />
</template>
 

• Type: number
• Default: 1500

buttonType

The buttonType prop defines the type of the copy button using the ButtonType enum.

 <template>
    <CopyButton :buttonType="ButtonType.ACTION_BUTTON" />
</template>
 

• Type: ButtonType
• Default: ButtonType.ACTION_ICON_BUTTON

Options

styleType

The styleType prop controls the visual style of the button using the ButtonStyleType enum.

Important: The DELETE styles are not available for this component.

 <template>
    <CopyButton :styleType="ButtonStyleType.PRIMARY_BRAND_FILLED" />
</template>
 

• Type: ButtonStyleType
• Default: ButtonStyleType.NEUTRAL_OUTLINED

Options

text

The text prop defines the label displayed on the copy button.

 <template>
    <CopyButton text="Copy Text" />
</template>
 

• Type: string
• Default: 'Copy'

size

The size prop controls the size of the button using the ButtonSize enum.

 <template>
    <CopyButton :size="ButtonSize.SM" />
</template>
 

• Type: ButtonSize
• Default: ButtonSize.SM

Options

icon

The icon prop specifies the Material Design Icon to be displayed on the button.

 <template>
    <CopyButton icon="mdi:content-copy" />
</template>
 

• Type: string
• Default: 'mdi:content-copy'

iconPosition

The iconPosition prop determines the position of the icon relative to the button text using the IconPosition enum.

 <template>
    <CopyButton 
        icon="mdi:content-copy" 
        :iconPosition="IconPosition.RIGHT" 
    />
</template>
 

• Type: IconPosition
• Default: IconPosition.RIGHT

Options

disabled

The disabled prop disables the copy button when set to true.

 <template>
    <CopyButton disabled />
</template>
 

• Type: boolean
• Default: false

Emits

Example

 <template>
    <CopyButton 
        @success="handleSuccess"
        @error="handleError"
    />
</template>
<script setup lang="ts">
const handleSuccess = () => {
    console.log("Text copied successfully")
}
const handleError = () => {
    console.log("Error copying text")
}
</script>