Copy

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.

Was this example helpful?

Usage#

Code
import { Copy } from "@medusajs/ui"
Code
<Copy content="yarn add @medusajs/ui" />

API Reference#

This component is based on the button element and supports all of its props

PropTypeDefault
content
string
-
variant
"mini"
|"default"
|null
"default"
asChild
boolean
false
Was this helpful?

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:

Code
1<TooltipProvider>2  <Copy content="yarn add @medusajs/ui" />3</TooltipProvider>

Examples#

Copy with Custom Display#

Was this example helpful?

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.

Copy command

Was this guide helpful?
Ask Anything
FAQ
What is Medusa?
How can I create a module?
How can I create a data model?
How do I create a workflow?
How can I extend a data model in the Product Module?
Recipes
How do I build a marketplace with Medusa?
How do I build digital products with Medusa?
How do I build subscription-based purchases with Medusa?
What other recipes are available in the Medusa documentation?
Chat is cleared on refresh
Line break