Light Dark System

Clipboard

<sl-clipboard> | SlClipboard
Since 2.0 experimental

Enables you to save content into the clipboard providing visual feedback.

Clicking the clipboard button will put “shoelace rocks” into your clipboard

<p>Clicking the clipboard button will put "shoelace rocks" into your clipboard</p>
<sl-clipboard value="shoelace rocks"></sl-clipboard>

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

const App = () => (
  <>
    <p>Clicking the clipboard button will put "shoelace rocks" into your clipboard</p>
    <SlClipboard value="shoelace rocks"></SlClipboard>
  </>
);

Examples

Use your own button


Copy Copied Error 
<sl-clipboard value="shoelace rocks">
  <button type="button">Copy to clipboard</button>
  <button slot="copied">Copied</button>
  <button slot="error">Error</button>
</sl-clipboard>
<br>
<sl-clipboard value="shoelace rocks">
  <sl-button>Copy</sl-button>
  <sl-button slot="copied">Copied</sl-button>
  <sl-button slot="error">Error</sl-button>
</sl-clipboard>

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

const App = () => (
  <>
    <SlClipboard value="shoelace rocks">
      <button type="button">Copy to clipboard</button>
      <div slot="copied">copied</div>
      <button slot="error">Error</button>
    </SlClipboard>
    <SlClipboard value="shoelace rocks">
      <sl-button>Copy</sl-button>
      <sl-button slot="copied">Copied</sl-button>
      <sl-button slot="error">Error</sl-button>
    </SlClipboard>
  </>
);

Get the textValue from a different element

Phone Number
+1 234 456789
<div class="row">
  <dl>
    <dt>Phone Number</dt>
    <dd id="phone-value">+1 234 456789</dd>
  </dl>
  <sl-clipboard for="phone-value"></sl-clipboard>
</div>

<style>
  dl, .row {
    display: flex;
    margin: 0;
  }
</style>

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

const css = `
  dl, .row {
    display: flex;
    margin: 0;
  }
`;

const App = () => (
  <>
    <div class="row">
      <dl>
        <dt>Phone Number</dt>
        <dd id="phone-value">+1 234 456789</dd>
      </dl>
      <SlClipboard for="phone-value"></SlClipboard>
    </div>

    <style>{css}</style>
  </>
);

Error if copy fails

For example if a for target element is not found or if not using https. An empty string value like value="" will also result in an error.


Copy Copied Error 
<sl-clipboard for="not-found"></sl-clipboard>
<br>
<sl-clipboard for="not-found">
  <sl-button>Copy</sl-button>
  <sl-button slot="copied">Copied</sl-button>
  <sl-button slot="error">Error</sl-button>
</sl-clipboard>

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

const App = () => (
  <>
    <SlClipboard for="not-found"></SlClipboard>
    <SlClipboard for="not-found">
      <sl-button>Copy</sl-button>
      <sl-button slot="copied">Copied</sl-button>
      <sl-button slot="error">Error</sl-button>
    </SlClipboard>
  </>
);

Change duration of reset to copy button 

<sl-clipboard value="shoelace rocks" reset-timeout="500"></sl-clipboard>

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

const App = () => (
  <>
    <SlClipboard value="shoelace rocks" reset-timeout="500"></SlClipboard>
  </>
);

Disclaimer

The public API is partially inspired by https://github.com/github/clipboard-copy-element

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.5.2/cdn/components/clipboard/clipboard.component.js"></script>

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

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

To import this component using a bundler:

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

To import this component as a React component:

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

Slots

Name Description
(default) The content that gets clicked to copy.
copied The content shown after a successful copy.
error The content shown if an error occurs.

Learn more about using slots.

Properties

Name Description Reflects Type Default
copyStatus Indicates the current status the copy action is in. 'trigger' | 'copied' | 'error' 'trigger'
value Value to copy. string ''
for Id of the element to copy the text value from. string ''
resetTimeout
reset-timeout 		Duration in milliseconds to reset to the trigger state. number 2000
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-copying onSlCopying Event when copying starts. -
sl-copied onSlCopied Event when copying finished. -

Learn more about events.

Methods

Name Description Arguments
copy() Copies the clipboard -

Learn more about methods.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>
  • <sl-icon-button>
  • <sl-popup>
  • <sl-tooltip>