import { ComponentExample } from "@/components/ComponentExample"
import { ComponentReference } from "@/components/ComponentReference"

export const metadata = {
  title: `Copy`,
}

# {metadata.title}

A component that wraps content in a button with copy functionality. It is useful for quickly copying text to the clipboard, such as code snippets or configuration commands.

In this guide, you'll learn how to use the Copy component.

<ComponentExample name="copy-demo" />

## Usage

```tsx
import { Copy } from "@medusajs/ui"
```

```tsx
<Copy content="yarn add @medusajs/ui" />
```

---

## API Reference

<ComponentReference mainComponent="Copy" />

---

## Usage Outside Medusa Admin

If you're using the `Copy` component in a project other than the Medusa Admin, make sure to include the `TooltipProvider` somewhere up in your component tree, as the `Copy` component uses a [Tooltip](../tooltip/page.mdx#usage-outside-medusa-admin):

```tsx
<TooltipProvider>
  <Copy content="yarn add @medusajs/ui" />
</TooltipProvider>
```

---

## Examples

### Copy with Custom Display

<ComponentExample name="copy-custom-display" />

### Copy Display As Child

Using the `asChild` prop, you can render the `<Copy/>` as its child. This is useful if you want to render a custom button, to prevent rendering a button inside a button.

<ComponentExample name="copy-as-child" hideFeedback />