Copy Button

Copies data to the clipboard when the user clicks the button.

<mo-copy-button value="This text will be copied."></mo-copy-button>

Examples

Custom labels

Copy Buttons display feedback in a tooltip. You can customize the labels using the copy-label, success-label, and error-label attributes.

<mo-copy-button
  value="Custom labels are easy"
  copy-label="Click me to copy text."
  success-label="Successfully copied text."
  error-label="Looks like your browser doesn't support this!"
></mo-copy-button>

import { MOCopyButton } from '@metsooutotec/modes-web-components/dist/react/copy-button';

const App = () => (
  <MOCopyButton
    value="Custom labels are easy"
    copy-label="Click me to copy text."
    success-label="Successfully copied text."
    error-label="Looks like your browser doesn't support this!"
  />
);

Custom icons

Use the copy-icon, success-icon, and error-icon slots to customize the icons that get displayed for each state. You can use <mo-icon> or your own images.

<mo-copy-button value="Copied from a custom button">
  <mo-icon slot="copy-icon" name="paste"></mo-icon>
  <mo-icon slot="success-icon" name="ok-circle-fill"></mo-icon>
  <mo-icon slot="error-icon" name="cross-circle-fill"></mo-icon>
</mo-copy-button>

import { MOCopyButton } from '@metsooutotec/modes-web-components/dist/react/copy-button';
import { MOIcon } from '@metsooutotec/modes-web-components/dist/react/icon';

const App = () => (
  <>
    <MOCopyButton value="Copied from a custom button">
      <MOIcon slot="copy-icon" name="paste" />
      <MOIcon slot="success-icon" name="ok-circle-fill" />
      <MOIcon slot="error-icon" name="cross-circle-fill" />
    </MOCopyButton>
  </>
);

Copying values from other elements

Normally, the data that gets copied will come from the component’s value attribute, but you can copy data from any element within the same document by providing its id to the from attribute.

When using the from attribute, the element’s textContent will be copied by default. Passing an attribute or property modifier will let you copy data from one of the element’s attributes or properties instead.

To copy data from an attribute, use from="id[attr]" where id is the id of the target element and attr is the name of the attribute you’d like to copy. To copy data from a property, use from="id.prop" where id is the id of the target element and prop is the name of the property you’d like to copy.

<!-- Copies the span's textContent -->
<span id="my-email">john.doe@email.com</span>
<mo-copy-button copy-label="Copy email" from="my-email"></mo-copy-button>

<br /><br />

<!-- Copies the input's "value" property -->
<mo-input id="my-input" type="text" value="User input" style="display: inline-block; max-width: 300px;"></mo-input>
<mo-copy-button copy-label="Copy input" from="my-input.value"></mo-copy-button>

<br /><br />

<!-- Copies the link's "href" attribute -->
<a id="my-link" href="https://modes-web.metso.com/">Modes UI Website</a>
<mo-copy-button copy-label="Copy website URL" from="my-link[href]"></mo-copy-button>

import { MOCopyButton } from '@metsooutotec/modes-web-components/dist/react/copy-button';
import { MOInput } from '@metsooutotec/modes-web-components/dist/react/input';

const App = () => (
  <>
    {/* Copies the span's textContent */}
    <span id="my-email">john.doe@email.com</span>
    <MOCopyButton copy-label="Copy email" from="my-email" />

    <br />
    <br />

    {/* Copies the input's "value" property */}
    <MOInput id="my-input" type="text" />
    <MOCopyButton copy-label="Copy input" from="my-input.value" />

    <br />
    <br />

    {/* Copies the link's "href" attribute */}
    <a id="my-link" href="https://modes-web.metso.com/">
      Modes UI Website
    </a>
    <MOCopyButton copy-label="Copy website URL" from="my-link[href]" />
  </>
);

Handling errors

A copy error will 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 for any reason. When this happens, the mo-error event will be emitted.

This example demonstrates what happens when a copy error occurs. You can customize the error label and icon using the error-label attribute and the error-icon slot, respectively.

<mo-copy-button from="i-do-not-exist"></mo-copy-button>

import { MOCopyButton } from '@metsooutotec/modes-web-components/dist/react/copy-button';

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

Sizing

The copy button is sized relative to the current font size (like the icon), it defaults to 16px. To change its size, set the font-size property on the copy button itself or on a parent element.

<mo-copy-button style="font-size: var(--mo-font-size-medium);" value="1rem (16px)"></mo-copy-button>
<mo-copy-button style="font-size: var(--mo-font-size-x-large);" value="1.25rem (20px)"></mo-copy-button>
<mo-copy-button style="font-size: var(--mo-font-size-2x-large);" value="1.5rem (24px)"></mo-copy-button>

import { MOCopyButton } from '@metsooutotec/modes-web-components/dist/react/copy-button';

const App = () => (
  <>
    <MOCopyButton style={{ fontSize: 'var(--mo-font-size-medium)' }} value="1rem (16px)" />
    <MOCopyButton style={{ fontSize: 'var(--mo-font-size-x-large)' }} value="1.25rem (20px)" />
    <MOCopyButton style={{ fontSize: 'var(--mo-font-size-2x-large)' }} value="1.5rem (24px)" />
  </>
);

Disabled

Copy buttons can be disabled by adding the disabled attribute.

<mo-copy-button value="You can't copy me" disabled></mo-copy-button>

import { MOCopyButton } from '@metsooutotec/modes-web-components/dist/react/copy-button';

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

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. The default duration is one second (1000 ms).

<mo-copy-button value="This text will be copied." feedback-duration="250"></mo-copy-button>

import { MOCopyButton } from '@metsooutotec/modes-web-components/dist/react/copy-button';

const App = () => <MOCopyButton value="This text will be copied." feedback-duration={250} />;

Localized

If the user does not provide custom labels, the copy button uses the localized terms copy, copied, and error for the tooltip messages. This example uses the Finnish translations. Note that only Finnish and English are provided out of the box, and English is the default.

<mo-copy-button lang="fi" value="This text will be copied." feedback-duration="3000"></mo-copy-button>

import { MOCopyButton } from '@metsooutotec/modes-web-components/dist/react/copy-button';

const App = () => <MOCopyButton lang="fi" value="This text will be copied." feedback-duration={3000} />;

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.

import '@metsooutotec/modes-web-components/dist/components/copy-button/copy-button.js';

import MOCopyButton from '@metsooutotec/modes-web-components/dist/react/copy-button/';

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/copy-button/copy-button.js"></script>

Slots

Learn more about using slots.

Properties

Learn more about attributes and properties.

Events

Learn more about events.

Custom Properties

Learn more about customizing CSS custom properties.

Parts

Learn more about customizing CSS parts.

Animations

Learn more about customizing animations.

Dependencies

This component automatically imports the following dependencies.

• <mo-icon>
• <mo-popup>
• <mo-tooltip>