Copy Button

CopyButton(
  _.value := "Web Awesome rocks!"
)()

CopyButton(  _.value := "Web Awesome rocks!")()

Copy buttons use the browser's clipboard.writeText() method, which requires a secure context (HTTPS) in most browsers.

Examples

Custom Labels

Copy Buttons display feedback in a tooltip. You can customize the labels using the copy-label, success-label, and error-label attributes.

CopyButton(
  _.value        := "Custom labels are easy",
  _.copyLabel    := "Click to copy",
  _.successLabel := "You did it!",
  _.errorLabel   := "Whoops, your browser doesn't support this!"
)()

CopyButton(  _.value        := "Custom labels are easy",  _.copyLabel    := "Click to copy",  _.successLabel := "You did it!",  _.errorLabel   := "Whoops, your browser doesn't support this!")()

Custom Icons

Use the copy-icon, success-icon, and error-icon slots to customize the icons that get displayed for each state. You can use <wa-icon> or your own images.

CopyButton(
  _.value := "Copied from a custom button",
  _.slots.copyIcon(Icon(_.name := "clipboard", _.variant := "regular")()),
  _.slots.successIcon(Icon(_.name := "thumbs-up", _.variant := "solid")()),
  _.slots.errorIcon(Icon(_.name := "xmark", _.variant := "solid")())
)()

CopyButton(  _.value := "Copied from a custom button",  _.slots.copyIcon(Icon(_.name := "clipboard", _.variant := "regular")()),  _.slots.successIcon(Icon(_.name := "thumbs-up", _.variant := "solid")()),  _.slots.errorIcon(Icon(_.name := "xmark", _.variant := "solid")()))()

Copying Values From Other Elements

Normally, the data that gets copied will come from the component's value attribute, but you can copy data from any element within the same document by providing its id to the from attribute.

When using the from attribute, the element's textContent will be copied by default. Passing an attribute or property modifier will let you copy data from one of the element's attributes or properties instead.

To copy data from an attribute, use from="id[attr]" where id is the id of the target element and attr is the name of the attribute you'd like to copy. To copy data from a property, use from="id.prop" where id is the id of the target element and prop is the name of the property you'd like to copy.

div(
  // Copies the span's textContent
  span(idAttr := "my-phone", "+1 (234) 456-7890"),
  " ",
  CopyButton(_.from := "my-phone")(),
  br(),
  br(),

  // Copies the input's "value" property
  span(
    cls("flex items-center gap-1"),
    Input(
      _.id := "my-input",
      _.`type`.text,
      _.value := "User input"
    )(
      styleAttr := "display: inline-block; max-width: 300px;"
    ),
    CopyButton(_.from := "my-input.value")()
  ),
  br(),

  // Copies the link's "href" attribute
  a(idAttr := "my-link", href := "https://webawesome.com/", "Web Awesome Website"),
  " ",
  CopyButton(_.from := "my-link[href]")()
)

div(  // Copies the span's textContent  span(idAttr := "my-phone", "+1 (234) 456-7890"),  " ",  CopyButton(_.from := "my-phone")(),  br(),  br(),  // Copies the input's "value" property  span(    cls("flex items-center gap-1"),    Input(      _.id := "my-input",      _.`type`.text,      _.value := "User input"    )(      styleAttr := "display: inline-block; max-width: 300px;"    ),    CopyButton(_.from := "my-input.value")()  ),  br(),  // Copies the link's "href" attribute  a(idAttr := "my-link", href := "https://webawesome.com/", "Web Awesome Website"),  " ",  CopyButton(_.from := "my-link[href]")())

Handling Errors

A copy error will occur if the value is an empty string, if the from attribute points to an id that doesn't exist, or if the browser rejects the operation for any reason. When this happens, the wa-error event will be emitted.

This example demonstrates what happens when a copy error occurs. You can customize the error label and icon using the error-label attribute and the error-icon slot, respectively.

CopyButton(_.from := "i-do-not-exist")()

CopyButton(_.from := "i-do-not-exist")()

Disabled

Copy buttons can be disabled by adding the disabled attribute.

CopyButton(
  _.value    := "You can't copy me",
  _.disabled := true
)()

CopyButton(  _.value    := "You can't copy me",  _.disabled := true)()

Changing Feedback Duration

A success indicator is briefly shown after copying. You can customize the length of time the indicator is shown using the feedback-duration attribute.

CopyButton(
  _.value            := "Web Awesome rocks!",
  _.feedbackDuration := 250
)()

CopyButton(  _.value            := "Web Awesome rocks!",  _.feedbackDuration := 250)()

Custom Styles

You can customize the button to your liking with CSS.

CopyButton(
  _.value := "I'm so stylish",
  _.slots.copyIcon(Icon(_.name := "clipboard")()),
  _.slots.successIcon(Icon(_.name := "thumbs-up")()),
  _.slots.errorIcon(Icon(_.name := "thumbs-down")())
)(
  className := "custom-styles"
)

CopyButton(  _.value := "I'm so stylish",  _.slots.copyIcon(Icon(_.name := "clipboard")()),  _.slots.successIcon(Icon(_.name := "thumbs-up")()),  _.slots.errorIcon(Icon(_.name := "thumbs-down")()))(  className := "custom-styles")

On this page