#Copyable

Click-to-copy is a behaviour pattern, not a component. Any existing element — a Button, InlineCodeSnippet, Attribute value, table cell, or DropdownMenuItem — copies a value on click and confirms it.

#Feedback rules

1. Element can change itself (button, icon button, code snippet action): swap in place. Copy icon → Check, label "Copy code" → "Copied" at the idle width, tooltip "Click to copy" → "Copied".
2. Clickable text without an icon (inline code snippet, a value): tooltip only.
3. Element disappears after the action or has nothing to transform (menu item): toast "Copied".

Never two feedbacks at once. Copied state resets after ~2 s.

Source · Storybook

#Usage

import { Button } from '@wallarm-org/design-system/Button';
import { Copyable, CopyableIcon } from '@wallarm-org/design-system/Copyable';
import { Copy } from '@wallarm-org/design-system/icons';

#Examples

#Labelled button

A labelled button using CopyableLabel for width-stable text swap. The wrapper always occupies the width of the wider label, preventing layout shift when the text toggles between "Copy code" and "Copied".

#In inline code snippet

InlineCodeSnippet has built-in click-to-copy with tooltip-only feedback (feedback rule 2 — clickable text without an icon).

#In code snippet

Inside a CodeSnippet, the CodeSnippetCopyButton uses the Copyable pattern internally — icon-only, ghost/neutral, with tooltip feedback.

#Value text

A plain text value wrapped in Copyable with tooltip feedback (feedback rule 2). This is the pattern for Attribute values or any non-interactive text that should be copyable on click.

#Dropdown menu item with toast

When the element disappears after the action (like a dropdown menu item), use toast feedback via onCopied (feedback rule 3). The Copyable component does not bake in toast — the consumer fires it from the callback.

#Select menu item with toast

A Select option that copies on select — same toast feedback pattern as the dropdown menu item (feedback rule 3).

#All recipes

All recipes side-by-side for comparison. The three feedback types — in-place swap, tooltip-only, and toast — are shown together.

#Props

#CopyableIcon

#CopyableLabel

#Explorer