Copy Button

import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';

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

      

      
    

import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';

const App = () => (
  <SlCopyButton
    value="Custom labels are easy"
    copy-label="Click to copy"
    success-label="You did it!"
    error-label="Whoops, your browser doesn't support this!"
  />
);

      

      
    

import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
import { SlIcon } from '@shoelace-style/shoelace/dist/react/sl-icon';

const App = () => (
  <>
    <SlCopyButton value="Copied from a custom button">
      <SlIcon slot="copy-icon" name="clipboard" />
      <SlIcon slot="success-icon" name="clipboard-check" />
      <SlIcon slot="error-icon" name="clipboard-x" />
    </SlCopyButton>
  </>
);

      

      
    

import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
import { SlInput } from '@shoelace-style/shoelace/dist/react/sl-input';

const App = () => (
  <>
    {/* Copies the span's textContent */}
    <span id="my-phone">+1 (234) 456-7890</span>
    <SlCopyButton from="my-phone" />

    <br /><br />

    {/* Copies the input's "value" property */}
    <SlInput id="my-input" type="text" />
    <SlCopyButton from="my-input.value" />

    <br /><br />

    {/* Copies the link's "href" attribute */}
    <a id="my-link" href="https://shoelace.style/">Shoelace Website</a>
    <SlCopyButton from="my-link[href]" />
  </>
);

      

      
    

import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';

const App = () => (
  <SlCopyButton from="i-do-not-exist" />
);

      

      
    

import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';

const App = () => (
  <SlCopyButton value="You can't copy me" disabled />
);

      

      
    

import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';

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

      

      
    

import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';

const css = `
  .custom-styles {
    --success-color: white;
    --error-color: white;
    color: white;
  }

  .custom-styles::part(button) {
    background-color: #ff1493;
    border: solid 4px #ff7ac1;
    border-right-color: #ad005c;
    border-bottom-color: #ad005c;
    border-radius: 0;
    transition: 100ms scale ease-in-out, 100ms translate ease-in-out;
  }

  .custom-styles::part(button):hover {
    scale: 1.1;
  }

  .custom-styles::part(button):active {
    translate: 0 2px;
  }

  .custom-styles::part(button):focus-visible {
    outline: dashed 2px deeppink;
    outline-offset: 4px;
  }
`;

const App = () => (
  <>
    <SlCopyButton value="I'm so stylish" className="custom-styles" />

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