Skip to content

Copy

Provides copy to clipboard capabilities to a specific content and value

Basic Usage

The Copy component can be used in conjunction with the default slot to append the copy to clipboard icon right next to it, and the content passed to the value property will be copied to clipboard

Hover me
vue
<Copy value="f5f74164">Hover me</Copy>

Text Indicator

If you want to display a text instead of the icon, you can do so by setting the text property on the component.

Hover me
vue
<Copy value="text copy" text="copy to clipboard">
  Hover me
</Copy>

Visibility

By default, Copy only displays the indicator while hovering the slot content, but this behavior can be modified by setting the visible property to true in the component

Content
vue
<Copy value="visible copy" visible>Content</Copy>

API

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.