Clipboard

<sl-clipboard> | SlClipboard

Since 2.0

experimental

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

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>
  </>
);

Examples

Providing directly a text value

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>
  </>
);

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';

Properties

Name	Description	Type	Default
`copy`	Indicates whether or not copy info is shown.	`boolean`	`false`
`value`	The value to copy.	`string`	`''`
`for`	The id of the element to copy the test value from.	`string`	`''`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Dependencies

This component automatically imports the following dependencies.

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