Light Dark System

Copy

<sl-copy> | SlCopy
Since 2.7 experimental

Copies data to the clipboard when the user clicks or taps the trigger.

<sl-copy value="Shoelace rocks!"></sl-copy>

import { SlCopy } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlCopy value="Shoelace rocks!"></SlCopy>
);

Examples

Custom Buttons

Use the default slot to customize the copy trigger. You can also customize the success and error messages using the respective slots.

Copy Copied! Error 
<sl-copy value="Copied from a custom button" class="custom-buttons">
  <sl-button>Copy</sl-button>
  <sl-button slot="success">Copied!</sl-button>
  <sl-button slot="error">Error</sl-button>
</sl-copy>

import { SlButton, SlCopy } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <>
    <SlCopy value="Copied from a custom button">
      <SlButton>Copy</SlButton>
      <SlButton slot="success">Copied!</SlButton>
      <SlButton slot="error">Error</SlButton>
    </SlCopy>
  </>
);

Copying the Value From Other Elements

By default, the data to copy will come from the value attribute. You

+1 (234) 456–7890



Shoelace Website 
<span id="phone-number">+1 (234) 456-7890</span>
<sl-copy from="phone-number"></sl-copy>

<br><br>

<sl-input type="text" value="Just an input" id="my-input" style="display: inline-block; max-width: 300px;"></sl-input>
<sl-copy from="my-input"></sl-copy>

<br><br>

<a href="https://shoelace.style/" id="my-link">Shoelace Website</a>
<sl-copy from="my-link"></sl-copy>

import { SlCopy, SlInput } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <>
    <span id="phone-number">+1 (234) 456-7890</span>
    <SlCopy from="phone-number" />

    <br /><br />

    <SlInput type="text" value="Just an input" id="my-input" style="display: inline-block; max-width: 300px;" />
    <SlCopy from="my-input" />

    <br /><br />

    <a href="https://shoelace.style/" id="my-link">Shoelace Website</a>
    <SlCopy from="my-link" />
  </>
);

Displaying Copy Errors

Copy errors can occur if the value is an empty string, if the from attribute points to an id that doesn’t exist, or if the browser rejects the operation. You can customize the error that’s shown by populating the error slot with your own content.



Copy Copied Error 
<sl-copy from="not-found"></sl-copy>

<br><br>

<sl-copy from="not-found">
  <sl-button>Copy</sl-button>
  <sl-button slot="success">Copied</sl-button>
  <sl-button slot="error">Error</sl-button>
</sl-copy>

import { SlCopy } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <>
    <SlCopy from="not-found"></SlCopy>

    <br /><br />

    <SlCopy from="not-found">
      <sl-button>Copy</sl-button>
      <sl-button slot="success">Copied</sl-button>
      <sl-button slot="error">Error</sl-button>
    </SlCopy>
  </>
);

Showing Tooltips

You can wrap a tooltip around <sl-copy> to provide a hint to users.

<sl-tooltip content="Copy to clipboard">
  <sl-copy value="Shoelace rocks!"></sl-copy>
</sl-tooltip>

import { SlCopy, SlTooltip } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlTooltip content="Copy to clipboard">
    <SlCopy value="Shoelace rocks!" />
  </SlTooltip>
);

Changing Feedback Duration

A success indicator is briefly shown after copying. You can customize the length of time the indicator is shown using the feedback-duration attribute. 

<sl-copy value="Shoelace rocks!" feedback-duration="250"></sl-copy>

import { SlCopy } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlCopy value="Shoelace rocks!" feedback-duration={250} />
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.6.0/cdn/components/copy/copy.component.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.6.0/cdn/components/copy/copy.component.js';

To import this component using a bundler:

import '@shoelace-style/shoelace/dist/components/copy/copy.component.js';

To import this component as a React component:

import { SlCopy } from '@shoelace-style/shoelace/dist/react';

Slots

Name Description
(default) A button that triggers copying.
success A button to briefly show when copying is successful.
error A button to briefly show when a copy error occurs.

Learn more about using slots.

Properties

Name Description Reflects Type Default
value The text value to copy. string ''
feedbackDuration
feedback-duration 		The length of time to show feedback before restoring the default trigger. number 1000
from An id that references an element in the same document from which data will be copied. If the element is a link, the href will be copied. If the element is a form control or has a value property, its value will be copied. Otherwise, the element’s text content will be copied. string ''
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-copied onSlCopied Emitted when the data has been copied. -
sl-error onSlError Emitted when the data could not be copied. -

Learn more about events.

Animations

Name Description
copy.in The animation to use when copy buttons animate in.
copy.out The animation to use when copy buttons animate out.

Learn more about customizing animations.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>
  • <sl-icon-button>