Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Setup
  • Theming
  • Accessibility
  • Testing
  • Utilities
    • Accessibility
    • Auto sizer
    • Color palettes
    • Copy
    • CSS utility classes
    • Delay
    • Error boundary
    • Focus trap
    • Highlight and mark
    • HTML ID generator
    • I18n
    • Inner text
    • Mutation observer
    • Outside click detector
    • Overlay mask
    • Portal
    • Pretty duration
    • Provider
    • Resize observer
    • Scroll
    • Text diff
    • Text truncation
    • Window events
  • EUI
  • Utilities
  • Copy

Copy

The EuiCopy component is a utility for copying text to clipboard. Wrap a function that returns a component. The first argument will be a

copy function.

Loading...

Copy to clipboard function

The function copyToClipboard allows you to copy text to the clipboard. It receives an argument of type string.

Loading...

Props

EuiCopy

𐘂𐘂
✄𐘗✄𐘗
Prop
↦
Description and type
↦
Default value
↵
Prop
textToCopy#
↦
Description and type

Text that will be copied to clipboard when copy function is executed.

Type: string
↦
Default value
Required
↵
Prop
children#
↦
Description and type

Function that must return a component. First argument is 'copy' function.
Use your own logic to create the component that users interact with when triggering copy.

Type: (copy: () => void) => ReactElement<any, string | JSXElementConstructor<any>>
↦
Default value
Required
↵
Prop
beforeMessage#
↦
Description and type

Tooltip message displayed before copy function is called.

Type: ReactNode
↦
Default value
↵
Prop
afterMessage#
↦
Description and type

Tooltip message displayed after copy function is called that lets the user know that
'textToCopy' has been copied to the clipboard.

Type: ReactNode
↦
Default value
Copied
↵
Prop
className#
↦
Description and type
Type: string
↦
Default value
↵
Prop
aria-label#
↦
Description and type
Type: string
↦
Default value
↵
Prop
data-test-subj#
↦
Description and type
Type: string
↦
Default value
↵
Prop
css#
↦
Description and type
Type: Interpolation<Theme>
↦
Default value
↵
Prop
title#
↦
Description and type

An optional title for your tooltip.

Type: ReactNode
↦
Default value
↵
Prop
id#
↦
Description and type

Unless you provide one, this will be randomly generated.

Type: string
↦
Default value
↵
Prop
content#
↦
Description and type

The main content of your tooltip.

Type: ReactNode
↦
Default value
↵
Prop
position#
↦
Description and type

Suggested position. If there is not enough room for it this will be changed.

Type: ToolTipPositions
↦
Default value
↵
Prop
onMouseOut#
↦
Description and type

If supplied, called when mouse movement causes the tool tip to be
hidden.

Type: (event: MouseEvent<HTMLSpanElement, MouseEvent>) => void
↦
Default value
↵
Prop
display#
↦
Description and type

Common display alternatives for the anchor wrapper

Type: "block" | "inlineBlock"
↦
Default value
↵
Prop
anchorProps#
↦
Description and type

Passes onto the span wrapping the trigger.

Type: CommonProps & HTMLAttributes<HTMLSpanElement>
↦
Default value
↵
Prop
delay#
↦
Description and type

Delay before showing tooltip. Good for repeatable items.

Type: ToolTipDelay
↦
Default value
↵
Prop
anchorClassName#
↦
Description and type

Passes onto the span wrapping the trigger.

Type: string
↦
Default value
↵
Prop
repositionOnScroll#
↦
Description and type

When true, the tooltip's position is re-calculated when the user
scrolls. This supports having fixed-position tooltip anchors.

When nesting an EuiTooltip in a scrollable container, repositionOnScroll should be true

Type: boolean
↦
Default value
↵
Prop
disableScreenReaderOutput#
↦
Description and type

Disables the tooltip content being read by screen readers when focusing the trigger element.
Do not use when the trigger aria-label and tooltip content can be rephrased to be standalone
information (action & additional information).
Enable this prop only when the trigger has a descriptive label that either duplicates or includes
the tooltip content and would result in repetitive output.

Type: boolean
↦
Default value
false
↵
𐘂𐘂
Edit this page

Previous
Color palettes
Next
CSS utility classes
  • Copy to clipboard function
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic