---
title: Clipboard Text
description: Displays read-only text with a one-click copy action.
order: 7
tags: [components]
---

import { Preview } from "$lib/components/preview";
import { ClipboardText } from "areia";

# Clipboard Text

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

[Source Code](https://github.com/ilhajs/areia/blob/main/packages/areia/src/components/clipboard-text/index.ts)

<Preview
  code={
    'import ilha from "ilha";\nimport { ClipboardText } from "areia";\n\nexport default ilha.render(() => (\n  <ClipboardText\n    text="npm install areia"\n    tooltip\n    class="w-80"\n  />\n));'
  }
  lang="tsx"
>
  <ClipboardText
    text="npm install areia"
    tooltip
    class="w-80"
  />
</Preview>

## Import

```ts
import { ClipboardText } from "areia";
```

## Usage

Use `ClipboardText` when the copy button should be interactive.

<Preview
  code={
    'import ilha from "ilha";\nimport { ClipboardText } from "areia";\n\nexport default ilha.render(() => (\n  <ClipboardText\n    text="0c239dd2-92b4-4b68-bf35-8d6e1c5c12fd"\n    class="w-96"\n  />\n));'
  }
  lang="tsx"
>
  <ClipboardText
    text="0c239dd2-92b4-4b68-bf35-8d6e1c5c12fd"
    class="w-96"
  />
</Preview>

## Examples

### Copy different text

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

<Preview
  code={
    'import ilha from "ilha";\nimport { ClipboardText } from "areia";\n\nexport default ilha.render(() => (\n  <ClipboardText\n    text="sk_live_••••••••••••abc123"\n    textToCopy="sk_live_abc123-full-secret-value"\n    class="w-80"\n    tooltip={{\n      text: "Copy secret",\n      copiedText: "Copied secret",\n    }}\n  />\n));'
  }
  lang="tsx"
>
  <ClipboardText
    text="sk_live_••••••••••••abc123"
    textToCopy="sk_live_abc123-full-secret-value"
    class="w-80"
    tooltip={{
      text: "Copy secret",
      copiedText: "Copied secret",
    }}
  />
</Preview>

### Sizes

<Preview
  code={
    'import ilha from "ilha";\nimport { ClipboardText } from "areia";\n\nexport default ilha.render(() => (\n  <div class="grid w-96 gap-3">\n    <ClipboardText text="Small clipboard text" size="sm" />\n    <ClipboardText text="Default clipboard text" size="base" />\n    <ClipboardText text="Large clipboard text" size="lg" />\n  </div>\n));'
  }
  lang="tsx"
>
  <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>
</Preview>

### Tooltip

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

<Preview
  code={
    'import ilha from "ilha";\nimport { ClipboardText } from "areia";\n\nexport default ilha.render(() => (\n  <ClipboardText\n    text="https://example.com/invite/areia"\n    class="w-96"\n    tooltip={{\n      text: "Copy invite link",\n      copiedText: "Invite link copied",\n      side: "bottom",\n    }}\n  />\n));'
  }
  lang="tsx"
>
  <ClipboardText
    text="https://example.com/invite/areia"
    class="w-96"
    tooltip={{
      text: "Copy invite link",
      copiedText: "Invite link copied",
      side: "bottom",
    }}
  />
</Preview>

### Labels

Customize the copy button label for localization.

<Preview
  code={
    'import ilha from "ilha";\nimport { ClipboardText } from "areia";\n\nexport default ilha.render(() => (\n  <ClipboardText\n    text="areia-token-123"\n    labels={{\n      copyAction: "Copiar para a área de transferência",\n    }}\n  />\n));'
  }
  lang="tsx"
>
  <ClipboardText
    text="areia-token-123"
    labels={{
      copyAction: "Copiar para a área de transferência",
    }}
  />
</Preview>

## 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.