Clipboard Text

Displays read-only text with a one-click copy action.

npm install areia

import { ilha } from "ilha";
import { ClipboardText } from "areia";

export default ilha.render(() => (
  <ClipboardText
    text="npm install areia"
    tooltip
    class="w-80"
  />
));

Import

import { ClipboardText } from "areia";

Usage

Use ClipboardText when the copy button should be interactive.

0c239dd2-92b4-4b68-bf35-8d6e1c5c12fd

import { ilha } from "ilha";
import { ClipboardText } from "areia";

export default ilha.render(() => (
  <ClipboardText
    text="0c239dd2-92b4-4b68-bf35-8d6e1c5c12fd"
    class="w-96"
  />
));

Examples

Copy different text

Display a shortened value while copying the full value with textToCopy.

sk_live_••••••••••••abc123

import { ilha } from "ilha";
import { ClipboardText } from "areia";

export default ilha.render(() => (
  <ClipboardText
    text="sk_live_••••••••••••abc123"
    textToCopy="sk_live_abc123-full-secret-value"
    class="w-80"
    tooltip={{
      text: "Copy secret",
      copiedText: "Copied secret",
    }}
  />
));

Sizes

Small clipboard text

Default clipboard text

Large clipboard text

import { ilha } from "ilha";
import { ClipboardText } from "areia";

export default ilha.render(() => (
  <div class="grid w-96 gap-3">
    <ClipboardText text="Small clipboard text" size="sm" />
    <ClipboardText text="Default clipboard text" size="base" />
    <ClipboardText text="Large clipboard text" size="lg" />
  </div>
));

Pass tooltip: true for the default tooltip, or configure the tooltip text, copied announcement, and side.

https://example.com/invite/areia

import { ilha } from "ilha";
import { ClipboardText } from "areia";

export default ilha.render(() => (
  <ClipboardText
    text="<https://example.com/invite/areia"
>    class="w-96"
    tooltip={{
      text: "Copy invite link",
      copiedText: "Invite link copied",
      side: "bottom",
    }}
  />
));

Labels

Customize the copy button label for localization.

areia-token-123

import { ilha } from "ilha";
import { ClipboardText } from "areia";

export default ilha.render(() => (
  <ClipboardText
    text="areia-token-123"
    labels={{
      copyAction: "Copiar para a área de transferência",
    }}
  />
));

API Reference

`ClipboardText`

Prop	Type	Default	Description
`text`	`string`	—	Text displayed and copied.
`textToCopy`	`string`	`text`	Text copied instead of the displayed value.
`size`	`"sm" \| "base" \| "lg"`	`"lg"`	Clipboard text size.
`tooltip`	`boolean \| ClipboardTextTooltip`	`false`	Enables and configures the copy tooltip.
`labels.copyAction`	`string`	`"Copy to clipboard"`	Accessible label for the copy button.
`onCopy`	`(text: string) => void`	—	Called after a successful copy.

Static render

ClipboardText.Static(...) renders the same markup without mounting clipboard behavior. Prefer ClipboardText(...) for interactive usage.