Copy Button

A Copy Button copies content to the clipboard and confirms success.

When to use

  • The user needs to copy a text-based value accurately for reuse in another context.
  • The user benefits from a visual confirmation that content has been copied.
  • The user needs to repeat the same copy action across many rows or items.

When not to use

  • If the interaction performs an action other than copying content, such as downloading or exporting content, use Button instead.
  • If the user needs to view and copy a code example, use Code Preview instead.
  • If the user needs to copy responses from an AI conversation, use Chat instead.
  • If the user needs contextual information without taking any action, use Tooltip instead.

Usage guidance

How to match the copied value to where it lands, and how visible to make the button in its context.

Match the copied value to its use

Copy Button copies the slot’s content by default, so the user copies the same value as plain text. Provide copytext when the copied value should differ from the display, so the user pastes a value that works where it lands. For example, an invoice number shown as 123 456 789 can copy as 123456789, so it drops into another system without cleanup.

Keep the button visible by default

Show Copy Button by default so the user can see the action is available. Use showonhover only in dense layouts, such as data tables with reusable values, where a visible button for every row would add too much visual noise.

Adjust appearance to context

Use the default appearance when it sits beside a value people expect to copy. Switch to a more prominent Button variant only when it has to stand out on its own, keeping it legible against its background.

Patterns

Recurring compositions where Copy Button repeats alongside data.

Copyable values in a table

Add Copy Button only to values that benefit from it, such as an invoice or reference number. Some rows may have nothing to copy, for example when the value is missing, so not every row needs it.

Reveal Copy Button only when the pointer or keyboard focus reaches the value it copies, so the table stays calm at rest.

See also