Copyable

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 |