Actions

Copy Button

semantic HTML

텍스트를 클립보드에 복사하고 결과를 안내합니다.

stablefreeSince 0.2

Live example

npm install chois-uiReady to copy

<div data-ui="copy-example"><code id="copy-value">npm install chois-ui</code><button type="button" data-copy-source="#copy-value">Copy command</button><output data-example-output aria-live="polite">Ready to copy</output></div>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

Contract	Value
Implementation	`semantic HTML`
Status	`stable`
License	`free`
Since	`0.2`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

버튼의 기본 slot에 복사 대상을 설명하는 이름을 제공하고 x-copy 또는 x-error 결과를 live region으로 안내합니다.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->