Copy to clipboard

With copy to clipboard, users can copy content to their clipboard.

Get design library

On this page

Preview

Copy a block of content

Copy one line of text

Features

  • Copy a block of content

    If users need to copy a large or formatted block of content, the content can be paired with a button to quickly copy it all to their clipboard. Use a normal button as the action trigger.

    • For example: A snippet of code

  • Copy one line of text

    When users need to frequently copy one line of text, a button can be placed inline to the text. Use an inline-icon button as the action trigger.

  • Trigger button

    Use a button as the trigger for the copy action. When the button is triggered, the content should copy to the user's clipboard. Choose between two button variants depending on the content that users intend to copy.

    • Normal button: Place the button adjacent to the content block on the right-hand side and vertically-aligned to the top. To copy the entire content within a container, place the button within the actions slot of the header.

    • Inline icon button: Place the button directly on the left to the text to keep the placement consistent and increase discoverability of the action.

  • Copy confirmation

    Use a popover to confirm the success of the action or to communicate the error. Use a status indicator within the popover.

General guidelines

Do

  • When using a normal button to copy a block of content, include the copy icon for consistent visual treatment.
  • Show the popover when the copy action is complete for effective and consistent feedback.

Don't

  • Don't place the copy action together with other actions within a button dropdown.
  • Don't use a primary button for copying text unless it's the primary action on a page.
  • Don't include a dismiss button in the popover.

Writing guidelines

General writing guidelines

  • Use sentence case, but continue to capitalize proper nouns and brand names correctly in context.

  • Use end punctuation, except in headers and buttons. Don’t use exclamation points.

  • Use present-tense verbs and active voice.

  • Don't use "please," "thank you," ellipsis "...," ampersand "&," "e.g.," "i.e.," or "etc." in writing.

  • Avoid directional language.

    • For example, use "previous" not "above," use "following" not "below."

  • Use device-independent language.

    • For example, use "choose" or "interact" not "click."

Component-specific guidelines

Button label

Use the text Copy as the label for the normal button used for copying a block of content.

Success text in the popover

  • Use the format: [Name of the content] copied

    • For example: Secret ARN copied

  • Provide a precise name to the content intended for copying.

    • The success text for copying a block of sample code can be, for example: Sample code copied

Error text in the popover

  • Use the format: [Name of the content] failed to copy

    • For example: ARN failed to copy

Accessibility guidelines

General accessibility guidelines

  • Follow the guidelines on alternative text and Accessible Rich Internet Applications (ARIA) regions for each component.

  • Make sure to define ARIA labels aligned with the language context of your application.

  • Don't add unnecessary markup for roles and landmarks. Follow the guidelines for each component.

  • Provide keyboard functionality to all available content in a logical and predictable order. The flow of information should make sense.

Button

  • Follow the accessibility guidelines for buttons.

  • Specify what content the button will copy with the label property of buttons.

    • For example: The ARIA label for an icon button to copy the ARN of a resource named prod/Database can be: Copy ARN of resource prod/Database.

Popover

Development guidelines

This pattern isn't available as a component, but we provide code examples to associate the button variants and the popover for the two use cases.

Copy a block of content

Preview

Code

The following code uses React and JSX syntax.

import React from 'react';
import { Button, Popover, StatusIndicator } from '@cloudscape-design/components';

export default () => (
  <Popover
    size="small"
    position="top"
    triggerType="custom"
    dismissButton={false}
    content={<StatusIndicator type="success">[Name of the content] copied</StatusIndicator>}
  >
    <Button
      iconName="copy"
      onClick={() => {
        navigator.clipboard.writeText('[text to be copied]');
      }}
    >
      Copy
    </Button>
  </Popover>
);

Copy one line of text

  • Use an inline-icon button with a copy icon.

  • Wrap the button in a small popover.

  • Use a box to add spacing between the button and the text to copy.

  • Use a status indicator in the popover content.

  • If the text to copy is a long word, wrap the popover and the text to copy in an element with custom CSS word-break: break-all.

Preview

text-that-gets-copied

Code

The following code uses React and JSX syntax.

import React from 'react';
import { Box, Button, Popover, StatusIndicator } from '@cloudscape-design/components';
import './custom.scss';

export default () => (
  <span className="custom-wrapping">
    <Box margin={{ right: 'xxs' }} display="inline-block">
      <Popover
        size="small"
        position="top"
        triggerType="custom"
        dismissButton={false}
        content={<StatusIndicator type="success">[Name of the content] copied</StatusIndicator>}
      >
        <Button
          variant="inline-icon"
          iconName="copy"
          ariaLabel="Copy [name of the content]"
          onClick={() => {
            navigator.clipboard.writeText('text-that-gets-copied');
          }}
        />
      </Popover>
    </Box>
    text-that-gets-copied
  </span>
);