@leafygreen-ui/copyable NPM

Copyable

npm (scoped)

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/copyable

NPM

npm install @leafygreen-ui/copyable

Example

<Copyable label="Label" description="Description">
  {'npm install @leafygreen-ui/copyable'}
</Copyable>

Output HTML

<label class="leafygreen-ui-1x9zy2h" for="copyable-7">Label</label>
<p class="leafygreen-ui-1jtodpe">Description</p>
<div class="leafygreen-ui-1r7yzs7">
  <code class="leafygreen-ui-b24pl6" id="copyable-7"
    >npm install @leafygreen-ui/copyable</code
  ><span class="leafygreen-ui-10wc33h"
    ><button
      type="button"
      class="leafygreen-ui-crgt"
      aria-disabled="false"
      aria-describedby="tooltip-7"
    >
      <span class="leafygreen-ui-tdo6z2"
        ><svg
          class="leafygreen-ui-1akpp5z"
          height="20"
          width="20"
          viewBox="0 0 16 16"
          role="img"
          aria-labelledby="Copy-7"
        >
          <title id="Copy-7">Copy Icon</title>
          <desc>Created with Sketch.</desc>
          <g
            id="Copy-Copy"
            stroke="none"
            stroke-width="1"
            fill="none"
            fill-rule="evenodd"
          >
            <path
              d="M13,5 L10,5 L10,2 L7,2 L7,11 L13,11 L13,5 Z M15,5 L15,13 L5,13 L5,0 L10,0 L15,5 Z"
              fill="currentColor"
            ></path>
            <path
              d="M4,4 L4,5 L2,5 L2,15 L9,15 L9,14 L10,14 L10,16 L1,16 L1,4 L4,4 Z"
              fill="currentColor"
            ></path>
          </g></svg
        >Copy</span
      >
    </button></span
  >
</div>

Properties

Prop	Type	Description	Default
`label`	`string`	Label text for the copyable contents.
`description`	`string`	Further text to describe the contents.	`undefined`
`className`	`string`	className applied to the container of the code element
`children`	`string`	The text that will be copied.
`darkMode`	`boolean`	Determines whether or not the component appears in dark mode.	`false`
`size`	`'default'`, `'large'`	The display size of the label, description, and copyable children	`'default'`
`copyable`	`boolean`	Whether or not a copy button should be shown.	`true`
`shouldTooltipUsePortal`	`boolean`	Whether or not the "Copied!" tooltip should use a React portal	`true`