Copy Button

The Open UI Kit Copy Button copies text to the clipboard and gives users immediate visual feedback.

Introduction

Use Copy Button for values that users often need to move into another tool: IDs, tokens, URLs, commands, and generated configuration. It is icon-only by design, so provide an accessible label for the specific value being copied.

Workspace ID

wksp_prod_8f21d4

Import

import { CopyButton } from '@open-ui-kit/core';

When to use

Use Copy Button beside values users are likely to reuse, such as commands, URLs, tokens, ids, and generated snippets. It reduces selection mistakes and gives immediate feedback that the value was copied.

Do not hide a primary workflow behind a copy-only interaction.

Anatomy

Copy Button is an icon action with an accessible label, tooltip, and temporary success state. The copied value should be visually close to the button so users know what will go to the clipboard. For longer snippets, pair it with Code Block or a clearly framed text area.

Sizes

Use large when the button stands alone or appears beside a field. Use medium or small inside dense layouts, tables, and inline metadata.

large

medium

small

Feedback

After copying, the button swaps to a success icon and tooltip for two seconds. Use onCopy when the page needs to show additional confirmation or analytics.

Nothing copied yet

Customize copyLabel, copiedLabel, and tooltipPlacement when the default tooltip would be ambiguous.

Positioned buttons

Use position, top, left, and right when the button needs to sit inside a relative container such as a code panel or read-only value box.

Local Storybook

yarn workspace @open-ui-kit/core storybook

Behavior notes

Keep the copied string in the surrounding page state and pass the exact value to the button. Use success feedback to confirm the action without moving focus or opening a modal. For sensitive values, consider reveal, permission, or confirmation behavior before copying.

Props

CopyButton extends icon button props and adds copy-specific options.

Prop	Type	Description
`text`	`string`	Text copied to the clipboard.
`size`	`'small' \| 'medium' \| 'large'`	Visual size. Defaults to `large`.
`position`	`'left' \| 'right'`	Absolutely positions the button inside a relative parent.
`top`	`string`	Top offset for positioned usage. Defaults to `16px`.
`left`	`string`	Left offset when `position="left"`.
`right`	`string`	Right offset when `position="right"`.
`disableMargin`	`boolean`	Removes the default outer margin.
`tooltipPlacement`	`TooltipProps['placement']`	Tooltip placement. Defaults to `top`.
`copyLabel`	`string`	Tooltip text before copying. Defaults to `Copy`.
`copiedLabel`	`string`	Tooltip text after copying. Defaults to `Copied`.
`onCopy`	`() => void`	Callback fired after the text is copied.

Accessibility

Copy Button is an icon button, so always provide aria-label. Make the label specific to the copied value, for example aria-label="Copy workspace ID". Avoid using only aria-label="Copy" when several copy actions appear near each other.

Usage guidance

Use Copy Button for exact values users should not retype.
Place it close to the value it copies.
Prefer large for standalone actions and smaller sizes in dense UIs.
Keep copied text free of invisible characters.
Pair destructive or sensitive copied values with clear surrounding text.