Copy

Copy text with a single click

Use the Copy component to allow users to copy text, data, links, coupon codes or snippets with a single click. They eliminate manual selection and reduce errors.

Preview

Primary

Secondary

Flat

Outline

Info

Success

Warning

Alert

---
import { Copy } from 'webcoreui/astro'
---

<Copy>Primary</Copy>
<Copy theme="secondary">Secondary</Copy>
<Copy theme="flat">Flat</Copy>
<Copy theme="outline">Outline</Copy>

<Copy theme="info">Info</Copy>
<Copy theme="success">Success</Copy>
<Copy theme="warning">Warning</Copy>
<Copy theme="alert">Alert</Copy>

<script>
    import { Copy } from 'webcoreui/svelte'
</script>

<Copy>Primary</Copy>
<Copy theme="secondary">Secondary</Copy>
<Copy theme="flat">Flat</Copy>
<Copy theme="outline">Outline</Copy>

<Copy theme="info">Info</Copy>
<Copy theme="success">Success</Copy>
<Copy theme="warning">Warning</Copy>
<Copy theme="alert">Alert</Copy>

import React from 'react'
import { Copy } from 'webcoreui/react'

const Component = () => (
    <React.Fragment>
        <Copy>Primary</Copy>
        <Copy theme="secondary">Secondary</Copy>
        <Copy theme="flat">Flat</Copy>
        <Copy theme="outline">Outline</Copy>

        <Copy theme="info">Info</Copy>
        <Copy theme="success">Success</Copy>
        <Copy theme="warning">Warning</Copy>
        <Copy theme="alert">Alert</Copy>
    </React.Fragment>
)

export default Component

Simply place the text inside the component you’d like to make copyable. The component comes with the above themes. You can set themes using the theme prop to change the visual appearance of your copy element.

Custom icons

The Copy component can also be created with custom icons. Use the copyIcon and copiedIcon props to create the Copy component with custom icons:

Click to copy

<Copy copyIcon="plus" copiedIcon="check">Click to copy</Copy>

You can use an icon type for the Astro component, or import SVG icons for Svelte/React components. For a list of available icon types, please see the documentation of the Icon component.

Styles

The Copy component extends the Badge component, meaning you can use the component with badge-specific props, such as small and rounded to change the appearance of your elements:

Small copies

Primary

Secondary

Outline

Info

Success

Warning

Alert

Small & rounded

Primary

Secondary

Outline

Info

Success

Warning

Alert

<Copy small={true}>Primary</Copy>
<Copy theme="secondary" small={true}>Secondary</Copy>
<Copy theme="outline" small={true}>Outline</Copy>

<Copy theme="info" small={true}>Info</Copy>
<Copy theme="success" small={true}>Success</Copy>
<Copy theme="warning" small={true}>Warning</Copy>
<Copy theme="alert" small={true}>Alert</Copy>

<Copy small={true} rounded={true}>Primary</Copy>
<Copy theme="secondary" small={true} rounded={true}>Secondary</Copy>
<Copy theme="outline" small={true} rounded={true}>Outline</Copy>

<Copy theme="info" small={true} rounded={true}>Info</Copy>
<Copy theme="success" small={true} rounded={true}>Success</Copy>
<Copy theme="warning" small={true} rounded={true}>Warning</Copy>
<Copy theme="alert" small={true} rounded={true}>Alert</Copy>

Tooltips

You can provide additional details to your users for the component with the tooltip prop. To position the tooltip, use the tooltipPosition prop:

With tooltip

With tooltip position

<Copy tooltip="Click icon to copy">With tooltip</Copy>
<Copy tooltip="Click icon to copy" tooltipPosition="bottom">With tooltip position</Copy>

API

type CopyProps = {
    tooltip?: string
    tooltipPosition?: 'left' | 'right' | 'bottom'
    copyIcon?: string
    copiedIcon?: string
    className?: string
} & BadgeProps

Please see the documentation of the Badge component for the BadgeProps type.

Prop	Purpose
`tooltip`	Sets a tooltip for the `Copy` component.
`tooltipPosition`	Sets the position of the tooltip.
`copyIcon`	Sets the copy icon of the component.
`copiedIcon`	Sets the copied icon of the component.
`className`	Pass additional CSS classes for the component.

<- Conditional Wrapper Data Table ->

Request improvement for this page