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

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

Do
  • 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.