Copy Button

Usage

When to use

• To copy plain text, large code snippets, and input values.
• When needing separation between the text-to-copy and the copy interaction.

When not to use

• To copy short code snippets, such as URLs, tokens, IDs, use a Copy Snippet.

Sizes

The Copy Button comes in small and medium sizes. Use the size that best fits the hierarchy of the UI.

Placement

Place the Copy Button as close to the content being copied as possible. Avoid too much visual separation between the content and the button to ensure users understand what will be copied to the clipboard.

Composition with other components

Since the CopyButton can target almost any associated DOM element, it can be composed with other i80 components to create and support more complex scenarios and use cases.

With form inputs

When combining the CopyButton with form inputs:

• Put the whole thing in a fieldset.
• Wrap the input control (generally a Text Input, Masked Input, or Textarea) and the Copy Button in a container with an 8px gap between each element. This is not something the components do for you; it is a layout you write.
• Use the icon-only Copy Button, as this layout already gives enough visual association.

This ensures that other form primitives (helper text, error, etc) will span the combined width of the input control and the CopyButton.

Single line inputs

A simple example composition of a CopyButton and TextInput or MaskedInput.

A more complex composition with helper and error text.

Multi-line inputs

In the case of a multi-line input (e.g., a Textarea or multi-line MaskedInput), align the CopyButton to the top of the control.

How to use this component

Write the button's text inside <i80-copy-button> and point target-to-copy at the element holding the value to copy. That is an input's value, or otherwise the text the element shows:

<p id="clipboardTarget" class="doc-copy-button-copy-text">
  The button will copy the text in this paragraph element.
</p>
<i80-copy-button target-to-copy="#clipboardTarget">Copy</i80-copy-button>

Icon-only

Add icon-only to show just the icon. The text is still needed: it becomes the button's aria-label.

<p id="clipboardTarget2" class="doc-copy-button-copy-text">
  The button will copy the text in this paragraph element.
</p>
<i80-copy-button icon-only target-to-copy="#clipboardTarget2">Copy</i80-copy-button>

Sizes

There are two sizes available, small and medium (medium is the default):

<p id="clipboardTarget3" class="doc-copy-button-copy-text">
  The button will copy the text in this paragraph element.
</p>
<i80-copy-button size="small" target-to-copy="#clipboardTarget3">Copy</i80-copy-button>

Full-width

This indicates that the button should take up the full-width of the parent container. Add the full-width attribute; it’s off by default.

<p id="clipboardTarget4" class="doc-copy-button-copy-text">
  The button will copy the text in this paragraph element.
</p>
<i80-copy-button full-width target-to-copy="#clipboardTarget4">Copy</i80-copy-button>

Text to copy

You can also give the string to be copied directly, with text-to-copy, instead of pointing at a target element:

<i80-copy-button text-to-copy="someSecretThingGoesHere">Copy your secret key</i80-copy-button>

Composition with form inputs

These representative examples showcase the compositional recommendations in the guidelines.

With single line inputs

<div style="display: flex; align-items: flex-end; gap: 8px">
  <i80-text-input label="Cluster name" helper-text="This is some example helper text.">
    <input type="text" id="cluster-name-example-text-input" value="aws-east-cluster-01">
  </i80-text-input>
  <i80-copy-button icon-only target-to-copy="#cluster-name-example-text-input">Copy</i80-copy-button>
</div>

With multi-line inputs

<div style="display: flex; align-items: flex-start; gap: 8px">
  <i80-textarea label="Cluster secret" helper-text="This is some example helper text.">
    <textarea id="cluster-secret-example-textarea">C9WhJuvE70CnTcqvNqptMhmnBHmMNXuj</textarea>
  </i80-textarea>
  <i80-copy-button icon-only target-to-copy="#cluster-secret-example-textarea">Copy</i80-copy-button>
</div>

Attributes

<i80-copy-button> renders this component. Everything it understands:

The tag keeps any native element you write inside it, so a server-rendered form, link or button works as it is. See Web Components for loading i80.js and the reference for these examples running.

Anatomy

States

Conformance rating

When used as recommended, there should not be any WCAG conformance issues with this component.

Applicable WCAG Success Criteria

This section is for reference only. This component intends to conform to the following WCAG Success Criteria:

Support

If any accessibility issues have been found within this component, let us know by submitting an issue.

0.1.0

Første i80-version (fork af upstream, se core/UPSTREAM.md).