The button copy component provides a simple way to copy text to the clipboard with visual feedback.
Example
Basic copy button with aria-label and value to copy to clipboard
code
<script type="module">
import '@blueprintui/components/include/button-copy.js';
</script>
<bp-button-copy aria-label="copy to clipboard" value="hello world"></bp-button-copy>Action
Different action variants (default, secondary, flat, inline) for visual hierarchy
code
<script type="module">
import '@blueprintui/components/include/button-copy.js';
</script>
<section bp-layout="inline gap:md block:center">
<bp-button-copy value="default" aria-label="copy default"></bp-button-copy>
<bp-button-copy action="secondary" value="secondary" aria-label="copy secondary"></bp-button-copy>
<bp-button-copy action="flat" value="flat" aria-label="copy flat"></bp-button-copy>
<bp-button-copy action="inline" value="inline" aria-label="copy inline"></bp-button-copy>
</section>Status
Status colors for semantic context (neutral, accent, success, warning, danger)
code
<script type="module">
import '@blueprintui/components/include/button-copy.js';
</script>
<div bp-layout="inline gap:md">
<bp-button-copy value="neutral" aria-label="copy"></bp-button-copy>
<bp-button-copy status="accent" value="accent" aria-label="copy accent"></bp-button-copy>
<bp-button-copy status="success" value="success" aria-label="copy success"></bp-button-copy>
<bp-button-copy status="warning" value="warning" aria-label="copy warning"></bp-button-copy>
<bp-button-copy status="danger" value="danger" aria-label="copy danger"></bp-button-copy>
</div>Custom Icons
Custom icon slots for replacing default copy/success icons with branded alternatives
code
<script type="module">
import '@blueprintui/components/include/button-copy.js';
import '@blueprintui/icons/shapes/add.js';
</script>
<bp-button-copy value="custom icons">
<bp-icon shape="add"></bp-icon>
</bp-button-copy>Disabled
Disabled state behavior across all action variants
code
<script type="module">
import '@blueprintui/components/include/button-copy.js';
</script>
<div bp-layout="inline gap:md block:center">
<bp-button-copy disabled value="disabled" aria-label="copy disabled"></bp-button-copy>
<bp-button-copy disabled action="secondary" value="disabled secondary" aria-label="copy disabled secondary"></bp-button-copy>
<bp-button-copy disabled action="flat" value="disabled flat" aria-label="copy disabled flat"></bp-button-copy>
<bp-button-copy disabled action="inline" value="disabled inline" aria-label="copy disabled inline"></bp-button-copy>
</div>Command
Programmatic copy triggering using command pattern with external button
code
<script type="module">
import '@blueprintui/components/include/button-copy.js';
import '@blueprintui/components/include/button.js';
</script>
<div bp-layout="block gap:md">
<bp-button-copy id="copy-btn" value="copy-from-command"></bp-button-copy>
<bp-button command="copy" commandfor="copy-btn">Command Copy</bp-button>
</div>
<script type="module">
document.getElementById('copy-btn').addEventListener('copy', (e) => console.log(e.detail));
</script>Install
NPM
// npm package
import '@blueprintui/components/include/button-copy.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/button-copy.js/+esm';
</script>Accessibility
- Use a clear, descriptive supporting text or aria-label that communicates its purpose.
- Use appropriate color contrast to make sure the text is easily readable for users with visual impairments.
bp-button-copy
Events
| Name | Types | Description |
|---|---|---|
copy | CustomEvent<{ value: string, error?: Error }> | Fires when copy is initiated |
Properties
| Name | Types | Description |
|---|---|---|
value | string | The text value to copy to clipboard |
i18n | set default aria/i18n strings | |
copy | ||
shape | string | Defines the icon shape to display within the button |
direction | 'up' | 'down' | 'left' | 'right' | Controls the directional orientation of the icon within the button |
icon | ||
action | 'primary' | 'secondary' | 'flat' | 'inline' | Controls the visual styling variant of the button, affecting background, border, and emphasis level |
status | 'accent' | 'success' | 'warning' | 'danger' | Defines the visual status type of the button, affecting its color and semantic meaning |
pressed | boolean | turns the button into a toggle button |
selected | boolean | indicate the current "selected" state of various widgets |
expanded | boolean | indicate if a control is expanded or collapsed |
readonly | boolean | makes the element not mutable, meaning the user can not interact with button |
disabled | boolean | determines if element is mutable or focusable |
type | 'button' | 'submit' | default behavior of the button |
name | string | represents the name of the current |
popoverTargetElement | HTMLElement | The target element for the popover https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
popoverTargetAction | | 'toggle' | 'show' | 'hide' | The action to perform on the target popover element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertargetaction |
popovertarget | string | The target popover id https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
command | string | The command property of the HTMLButtonElement interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, commandfor must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
commandFor | string | The command for property of the HTMLButtonElement interface gets and sets the id of the element being controlled by this button. For this to have an effect, command must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
form | HTMLFormElement | |
formAction | string | |
formEnctype | string | |
formMethod | string | |
formNoValidate | boolean | |
formTarget | string | |
labels | NodeListOf | |
validationMessage | string | |
validity | ValidityState | |
willValidate | boolean | |
checkValidity | any | |
reportValidity | any | |
setCustomValidity | any | |
formAssociated | boolean |
Attributes
| Name | Types | Description |
|---|---|---|
value | string | The text value to copy to clipboard |
i18n | set default aria/i18n strings | |
shape | string | Defines the icon shape to display within the button |
direction | 'up' | 'down' | 'left' | 'right' | Controls the directional orientation of the icon within the button |
action | 'primary' | 'secondary' | 'flat' | 'inline' | Controls the visual styling variant of the button, affecting background, border, and emphasis level |
status | 'accent' | 'success' | 'warning' | 'danger' | Defines the visual status type of the button, affecting its color and semantic meaning |
pressed | boolean | turns the button into a toggle button |
selected | boolean | indicate the current "selected" state of various widgets |
expanded | boolean | indicate if a control is expanded or collapsed |
readonly | boolean | makes the element not mutable, meaning the user can not interact with button |
disabled | boolean | determines if element is mutable or focusable |
type | 'button' | 'submit' | default behavior of the button |
name | string | represents the name of the current element as a string. |
popoverTargetElement | HTMLElement | The target element for the popover https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
popovertargetaction | | 'toggle' | 'show' | 'hide' | The action to perform on the target popover element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertargetaction |
popovertarget | string | The target popover id https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
command | string | The command property of the HTMLButtonElement interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, commandfor must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
commandFor | string | The command for property of the HTMLButtonElement interface gets and sets the id of the element being controlled by this button. For this to have an effect, command must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
CSS Properties
| Name | Types | Description |
|---|---|---|
--background | ||
--color | ||
--border | ||
--padding | ||
--min-width | ||
--font-size | ||
--width | ||
--height | ||
--cursor | ||
--outline | ||
--outline-offset | ||
--line-height | ||
--text-align |
Slots
| Name | Types | Description |
|---|---|---|
default | Icon shown in default/rest state | |
success | content shown after successful copy | |
error | content shown after copy error |