Skip to content
hightouchUI

Design system

v40.8.0

Clipboard button

Clipboard button allows user to copy some information to the clipboard.

Example

Usage

Copy text

Copy input value

Sizes

Guidelines

When to use

  • When there's information on the page that the user would usually want to copy for further use.

When not to use

  • If displaying multi-line code or commands for the user to copy, use a code snippet instead.

Placement

  • Always position a clipboard button on the right side of the information it's copying.
  • Maintain a 4px distance before a clipboard button.

Props

Inherits margin props.

NameDefaultDescription
text

string

Text to copy to clipboard after user clicks this button.

size

"sm" | "md" | "lg"

Size of the button.