Copy Text

Copy Text Button provides the ability to copy the text into the clipboard

Examples

Text #

The text attribute is required and its value contains the text that the user wants to copy. Click on the button to copy the text into the clipboard.

This is an example text

Web Component
HTML Blueprint

<chi-copy-text text="This is an example text"></chi-copy-text>

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

Disabled #

Use the disabled attribute to disable the copy-text button.

This is an example text

Web Component
HTML Blueprint

<chi-copy-text text="This is an example text" disabled></chi-copy-text>

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

Sizes #

Copy text button supports the following sizes: xs, sm, sm--2, sm--3, md, lg, xl, xxl

sm--2

sm--3

xxl

Web Component
HTML Blueprint

<!-- -xs : 12x12px -->
<chi-copy-text text="text" size="xs"></chi-copy-text>
<!-- sm : 16x16px -->
<chi-copy-text text="text" size="sm"></chi-copy-text>
<!-- sm--2 : 20x20px -->
<chi-copy-text text="text" size="sm--2"></chi-copy-text>
<!-- sm--3 : 24x24px -->
<chi-copy-text text="text" size="sm--3"></chi-copy-text>
<!-- md : 32x32px -->
<chi-copy-text text="text" size="md"></chi-copy-text>
<!-- lg : 64x64px -->
<chi-copy-text text="text" size="lg"></chi-copy-text>
<!-- xl : 96x96px -->
<chi-copy-text text="text" size="xl"></chi-copy-text>
<!-- xxl : 128x128px -->
<chi-copy-text text="text" size="xxl"></chi-copy-text>

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

Web Component

Accessibility

Accessibility guidelines coming soon