CopyButton - OLUN. Design System

기본 라벨: label 기본값은 복사, copiedLabel 기본값은 복사됨
피드백: 성공 시 아이콘과 라벨을 바꾸고 aria-live로 완료 상태를 알립니다.
접근성 기준: 아이콘 전용 사용 시 aria-label 또는 숨김 텍스트로 복사 대상을 설명합니다.

기본 복사

텍스트 라벨과 완료 상태

코드 보기tsx

import { CopyButton } from "@olundot/ui";

export function InviteCodeCopy() {
  return (
    <CopyButton
      value="OLUN-2026-A1"
      label="초대 코드 복사"
      copiedLabel="복사 완료"
    />
  );
}

아이콘 전용 복사

좁은 행 액션과 접근 가능한 이름

코드 보기tsx

import { CopyButton } from "@olundot/ui";

export function IconOnlyCopy() {
  return (
    <CopyButton
      aria-label="초대 링크 복사"
      value="https://olun.example/invite/A1"
      label={<span className="sr-only">초대 링크 복사</span>}
      copiedLabel={<span className="sr-only">복사 완료</span>}
      size="sm"
      variant="ghost"
    />
  );
}

성공과 실패 피드백

onCopied와 onClick으로 상태 메시지 표시

복사 전

코드 보기tsx

import { useState } from "react";
import { CopyButton } from "@olundot/ui";

export function CopyFeedback() {
  const [message, setMessage] = useState("복사 전");

  return (
    <div className="grid gap-2">
      <CopyButton
        value="student-id-20260001"
        label="학번 복사"
        copiedLabel="복사됨"
        onCopied={() => setMessage("클립보드에 복사했습니다.")}
      />
      <CopyButton
        value=""
        label="비어 있는 값 복사"
        variant="ghost"
        onClick={(event) => {
          event.preventDefault();
          setMessage("복사할 값이 없습니다.");
        }}
      />
      <p role="status" className="text-sm text-text-secondary">{message}</p>
    </div>
  );
}