ClipboardText
Displays a monospace text value with a one-click copy-to-clipboard button that appears on hover.
Import
tsx
import { ClipboardText } from '@tac-ui/web';Playground
Interactively configure the ClipboardText props below.
npm install @tac-ui/web
tsx
<ClipboardText text="npm install @tac-ui/web" />Default
The copy button appears on hover with an animated icon swap between the copy and check states.
npm install @tac-ui/web
tsx
<ClipboardText text="npm install @tac-ui/web" />Sizes
Three size options control the padding, font size, and icon size to match surrounding content.
npm install @tac-ui/web
npm install @tac-ui/web
npm install @tac-ui/web
tsx
<ClipboardText size="sm" text="npm install @tac-ui/web" />
<ClipboardText size="md" text="npm install @tac-ui/web" />
<ClipboardText size="lg" text="npm install @tac-ui/web" />Various Content
Use ClipboardText to display any copyable value: install commands, API keys, URLs, or environment variables.
npm install @tac-ui/web
sk-proj-aBcDeFgHiJkLmNoPqRsTuVwXyZ1234567890
https://tac-ui.vercel.app/web/components/button
tsx
<ClipboardText text="npm install @tac-ui/web" />
<ClipboardText text="sk-proj-aBcDeFgHiJkLmNoPqRsTuVwXyZ1234567890" />
<ClipboardText text="https://tac-ui.vercel.app/web/components/button" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | The text value to display and copy to clipboard. |
| size | "sm" | "md" | "lg" | "md" | Controls the padding, font size, and icon size. |
| onCopy | () => void | - | Called after the text is successfully copied to clipboard. |
| className | string | - | Additional CSS class names applied to the container. |