진행 중
지금 하는 일을 알립니다.
완료될 때까지 중복 실행을 막습니다.
복사 중…
열린 원 · 따뜻한 황동색실제 클립보드 동작
한 문장을 가져가 보세요.
복사가 끝나면 이 자리에서 알려드립니다.
복사가 허용되지 않으면 위 문장을 직접 선택해 복사할 수 있습니다.
01 / FEEDBACK
상태는 모양과 말로 함께.
아래 세 카드는 상태 표현 예시입니다.
완료
실제로 끝난 결과를 알립니다.
작업이 끝난 뒤에만 표시합니다.
문장을 복사했습니다.
확인 표시 · 부드러운 초록색실패
무엇을 못 했는지 말하고,
다음에 할 수 있는 일을 안내합니다.
복사하지 못했습니다. 다시 시도하세요.
교차 표시 · 따뜻한 붉은색실패한 뒤도 확인해 보세요.
이 동작은 실패 피드백을 보여 주는 시뮬레이션입니다. 잠시 진행 상태를 거친 뒤 같은 버튼으로 다시 시도할 수 있습니다.
버튼을 눌러 진행과 실패를 확인하세요.
02 / DIRECTION
화살표도 행동에 맞게.
아래 링크는 표시된 방식대로 이동합니다.
같은 탭에서 이어보기
목록에서 상세로, 같은 페이지의 다음 내용으로 이동합니다.
요소 라이브러리새 탭에서 열기
현재 화면을 유지하고 별도의 작업 화면을 엽니다.
페이지 제작실 새 탭03 / SCALE & ALIGNMENT
작은 기호에도 같은 기준.
기호의 크기와 누르는 영역은 따로 확보합니다.
| 행동 | 16px | 18px | 20px |
|---|---|---|---|
| 검색 | |||
| 복사 | |||
| 닫기 |
글 옆에서는 18px.
같은 상자 안에 놓고 글과 중심을 맞춥니다. 닫기 같은 단독 기호에도 행동 이름과 충분한 조작 영역을 제공합니다.
제품의 표식에는 이름을.
CVA와 도구들의 브랜드 심벌은 제품을 찾는 표식입니다. 이동·복사·닫기에는 행동을 설명하는 기호를 사용합니다.
브랜드 아이콘 보기같은 기준으로 사용하기
이 페이지의 피드백과 라이브러리는 같은 상태 처리 함수와 CSS를 사용합니다. 위의 문장 복사는 실제 클립보드 작업이고, 실패 체험만 명시적인 시뮬레이션입니다. 정적 상태 카드는 실행 결과가 아닌 표현 예시입니다.
진행·완료·실패 모두 실제 문장을 제공하며, 기호와 색은 읽기를 돕습니다. 움직임 줄이기 설정에서는 진행 표식도 정지합니다.
행동 기호는 기존 Lucide 고정 버전의 경로를 그대로 사용합니다. 출처·사용권 고지 · 브랜드와 상태 사용 기준