Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Design
Components
Patterns
    • Introduction
      • Overview
    • Patterns
      • Buttons
      • Copy
      • Drag and drop
      • Error handling
      • Filters
      • Loaders
      • Rich-text editor
      • Save
      • Tables
    Table of Contents
    • Anatomy
      • Related components
    • Layouts
      • Default
      • Minimal
    • Content
    • Flows
    • Localization & internationalization
    • Accessibility
      • Default
      • Minimal
      • Alt text
      • ARIA attributes
      • Additional resources

    Copy

    The copy action provides the user the ability to copy a value from an input field or other areas within the interface. It temporarily stores information that can be retrieved and used within a given flow.

    Table of Contents
    • Anatomy
      • Related components
    • Layouts
      • Default
      • Minimal
    • Content
    • Flows
    • Localization & internationalization
    • Accessibility
      • Default
      • Minimal
      • Alt text
      • ARIA attributes
      • Additional resources

    Anatomy

    • Always include the value being copied and the copy action which can be represented as a Button or an Icon Button
    • When the field label is unavailable, it is recommended to use the Tooltip component on the action to reinforce the type of information being copied
    A ‘default’ copy layout within a form consisting of a label, input field and a “Copy” button
    1. Label of the value being copied. Ensure a label is visible in the interface however it can be visually hidden if required.
    2. Actual value that will be copied
    3. Copy action

    Related components

    • Input group
    • Notification
    • Icon button
    • Tooltip

    Layouts

    Default

    • Use an Input group to enable the copy action within forms
    • If the data being copied is read-only, use a read-only Input group
    • Use a medium-sized default button for copy actions and place the button to the side of the input field
    ‘Defaut’ copy layout of an Input group within forms The user has actioned the “Copy“ button with a transient Notification appearing top right of screen

    Minimal

    Copy interaction can be also found in a more minimal style, for example in list items within cards. The label in that case would not be visible, or it might have an icon at the start to indicate the field type. The copy action would be to the side of the item as an Icon button.

    ‘Minimal’ copy layout of three list items ‘Minimal’ copy layout of three list items with a Tooltip on hover or focus on an Icon button

    Content

    • For Input groups, use “Copy” as the visible button label
    • For Icon buttons, include the object as part of the Tooltip content
    • If there are multiple copy buttons on a page or view, ensure the appropriate ARIA or alt attributes are added
    The copy pattern displayed in ‘default’ and ‘minimal’ layouts

    Flows

    After the interaction, provide feedback with a success Notification. Notifications should remain on screen for at least 5 seconds.

    The ‘default’ copy layout where the user has actioned the “Copy” button and a transient Notification appearing top right of screen for at least 5 seconds

    Localization & internationalization

    The copy action should appear on the right side of the Input field for LTR (left-to-right) languages and on the left side for RTL (right-to-left) languages.

    Different languages can also affect the copy label length so ensure adequate space is considered within the Input field.

    Accessibility

    Default

    Do this
    • Use the read-only Input field in forms
    Not this
    • Don’t use the disabled Input field

    Minimal

    When the copy interaction is used in a list, make sure that the interaction is discoverable by using the copy icon inside an Icon button and provide a Tooltip on hover or focus.

    ‘Minimal’ copy layout of three list items with a Tooltip on keyboard focus on an Icon button

    Alt text

    In the example above, the icon text label and copy button text label should match. The email icon will have alt text as “email” and the copy Icon button will say “Copy email”.

    ARIA attributes

    If there are multiple copy fields on a page or view within a form, use the aria-label attribute within the “Copy” button to match the fields name.

    Two Input groups within a form showing “Copy” button actions
    1. <button aria-label="Copy invoice number">Copy</button>
    2. <button aria-label="Copy confirmation number">Copy</button>

    Additional resources

    • https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html
    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2024