Installation

Via CDN

Add script import before the closing body tag of your web page:

<script
  referrerpolicy="no-referrer"
  defer
  src="https://cdn.jsdelivr.net/npm/@kreonovo/clipboard-button"
></script>

Via npm

npm i @kreonovo/clipboard-button

Usage

<clipboard-button content="Content to copy as a string"
  >Button text</clipboard-button
>

Options

• disableIcon attribute: setting to true will remove the icon from the button

Styling

You can target the component by tag name clipboard-button. For example:

<style>
  clipboard-button {
    --btn-border: 1rem;
    /* Add more styles as needed */
  }
</style>

The following styles are available:

• --btn-border
• --btn-text-decoration
• --btn-cursor
• --btn-transition
• --btn-color
• --btn-line-height
• --btn-font-weight
• --btn-text-align
• --btn-margin-top
• --btn-margin-bottom
• --btn-padding
• --btn-border-radius
• --btn-background-color
• --btn-display
• --btn-margin-right
• --btn-font-family
• --btn-text-transform
• --btn-hover-background-color
• --btn-hover-color
• --btn-hover-box-shadow
• --btn-hover-transform
• --btn-hover-opacity
• --copy-link-bar-justify-content
• --copy-link-bar-border
• --copy-link-bar-background-color
• --copy-link-bar-border-radius
• --copy-link-bar-display
• --copy-link-bar-align-items
• --copy-link-bar-padding
• --copy-link-input-margin-left
• --copy-link-input-border
• --copy-link-input-overflow
• --copy-link-input-white-space
• --copy-link-input-background-color
• --copy-link-input-color
• --copy-link-input-font-size
• --copy-link-max-width