Copy Text

A small set of components to use in places where "copy" text is provided such as in a Copy Button or a block of text to be copied elsewhere.

React Component

Copy Text (inline)

inline copy button example

Copy Text (block)

Reply: me.ns.cloudflare.com

me.ns.cloudflare.com

Copy Button

Copy Button - Borderless

Copy Button (fill container)

Sage Component

SageCopyText

<h3 class="t-sage-heading-6">Copy Text (inline)</h3>
<%= sage_component SageCopyText, { value: "inline copy button example", semibold: true } %>

<h3 class="t-sage-heading-6">Copy Text (block)</h3>
<%= sage_component SageCopyTextCard, {} do %>
  <p><b>Reply:</b> me.ns.cloudflare.com</p>
  <p>me.ns.cloudflare.com</p>
  <p>me.ns.cloudflare.com</p>
<% end %>

<h3 class="t-sage-heading-6">Copy Button</h3>
<%= sage_component SageCopyButton, { value: "semi-bold copy example", semibold: true } %>

<h3 class="t-sage-heading-6">Copy Button - Borderless</h3>
<%= sage_component SageCopyButton, { borderless: true, value: "borderless copy", semibold: true } %>

<h3 class="t-sage-heading-6">Copy Button (fill container)</h3>
<%= sage_component SageCopyButton, { fill_container: true, value: "fill container example", semibold: true } %>

Property	Description	Type	Default
`semibold`	Whether or not the whole block should be set at the Semibold weight, since a number of implementations use this.	Boolean	`false`
`value` required	Sets the text for the component.	String	`nil`
`fill_container` (CopyButton only)	Sets the CopyButton component to fill its container.	Boolean	`false`

Use inline <b> tag to add bolding to select portions of these blocks.
Provide a local max-width as desired in order to limit overflowing text. Truncation is setup and ready for this by default on the inline Copy Text, but can be turned on for the Copy Text Card with truncate_contents set to true.

Don't

Manually apply bolding to an entire block of any of these components; use semibold prop to accomplish this effect instead.