Copy Button

Loading...

Copy Button: copies text to the clipboard with visual feedback.

• Tag: <flint-copy-button>
• Class: FlintCopyButton

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintCopyButton } from 'flint-ui';

Usage

<flint-copy-button></flint-copy-button>

Properties

Property	Attribute	Type	Default	Description
value	value	string	''	The text value to copy.
from	from	string	''	An id referencing another element to copy from. - from="el" copies textContent - from="el[attr]" copies an attribute value - from="el.prop" copies a property value
disabled	disabled	boolean	false	Disables the copy button.
copyLabel	copy-label	string	'Copy'	Label shown in the tooltip (idle state).
successLabel	success-label	string	'Copied!'	Label shown in the tooltip after successful copy.
errorLabel	error-label	string	'Error'	Label shown in the tooltip on copy error.
feedbackDuration	feedback-duration	number	1000	Duration (ms) to show feedback before returning to idle.
tooltipPlacement	tooltip-placement	'top' | 'right' | 'bottom' | 'left'	'top'	Tooltip placement.

Events

Event	Detail	Description
flint-copy	—	Fired after a successful copy operation.
flint-copy-error	—	Fired when the copy operation fails.

Slots

Name	Description
success-icon
error-icon
copy-icon

CSS Custom Properties

Property	Default
--flint-copy-button-size	—
--flint-copy-button-icon-size	—
--flint-copy-button-success-color	var(--flint-success-color
--flint-copy-button-error-color	var(--flint-error-color
--flint-font-family	—
--flint-border-color	—
--flint-border-radius-md	—
--flint-surface-1	—
--flint-text-color-muted	—
--flint-hover-color	—
--flint-text-color	—
--flint-active-color	—
--flint-primary-color	—
--flint-border-radius-sm	—
--flint-tooltip-bg	—
--flint-tooltip-text-color	—

---