Copy to clipboard
With copy to clipboard, users can copy content to their clipboard.
On this page
Did this page help you?
Tell us more - optional
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.
For example: Copy a long URL within a table or an Amazon Resource Name (ARN) within a list of key-value pairs (see live example in the details page demo).
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
Follow the accessibility guidelines for 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
Use a normal button with a
copy
icon.Wrap the button in a small popover.
Use a status indicator in the popover 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
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>
);