컴포넌트

복사

실제 결과를 알리는 접근성 있는 복사 동작입니다.

값 및 간결한 피드백

Value feedback repeats what was copied; compact feedback suits a specimen that already shows it.

사용 위치: Palette.

사용법과 인터페이스

DemoCopyButton은 ui-button과 ui-copy-status 라이브 영역을 포함한 span.ui-copy를 렌더링합니다. label은 보조 기술에 동작 이름을 제공하며 feedback="compact"는 값 대신 “Copied”를 알립니다. DemoCopyGroup 안에서는 래퍼 없이 렌더링되고 버튼들이 하나의 공유 상태 영역에 결과를 알립니다.

<DemoCopyButton value="var(--color-blue-60)" label="Copy the blue 60 variable">Copy variable</DemoCopyButton>

<span class="ui-copy">  <button type="button" class="ui-button" data-size="sm" aria-label="Copy the blue 60 variable">…Copy variable</button>  <span class="ui-copy-status" role="status" data-result="success">Copied var(--color-blue-60)</span></span>

data-result는 success 또는 error입니다. 텍스트는 항상 실제 결과를 설명합니다.