WICKEDTeamWicked Design System / 컴포넌트
버튼
데이터 변경·실행·확정 동작을 위한 컴포넌트.
적용 범위: TeamWicked 자체 브랜드·웹사이트. 호스팅 제품의 외형은 포함하지 않습니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.
메인 웹 · WickedCta 원본 구조 / Geist + Pretendard예시 데이터 · API 미연결
목적과 사용
데이터 변경·실행·확정 동작에 사용합니다. 새 페이지로 이동할 때는 링크를 사용합니다.
구성과 변형
라벨, 선택적 아이콘, 실행 상태. 변형의 외형은 각 제품의 기존 토큰을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.
동작 규칙
- BTN-01 SHOULD: 한 작업 영역에서 가장 중요한 행동 하나를 primary로 강조합니다. 독립 작업 영역의 예외는 명시합니다.
- BTN-02 MUST: 비동기 실행 중 중복 제출을 막고 진행·실패·성공을 구분합니다.
- BTN-03 MUST: 삭제·재설치 버튼은 대상을 명시하고 파괴적 작업 확인 규칙을 따릅니다.
- BTN-04 MUST: 일반 폼 내부의 보조 버튼에는 type=button을 명시합니다.
콘텐츠 예시
좋음: ‘서버 재시작’ / 피함: 동작을 알 수 없는 ‘확인’.
우리 구현과 연결
TeamWicked 자체 웹사이트의 토큰과 CTA를 사용합니다. vPanel·Pterodactyl·Store의 구현은 WickedHost 체계에 속하며 이 체계의 컴포넌트를 정의하지 않습니다. 실행 예제의 원본 경로는 구현 코드 탭을 확인하세요.
상태와 검증
빠른 두 번 클릭·Enter 연속 입력·지연·실패 후 재시도를 검사합니다.
일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. 검증 체크리스트에 증거를 연결합니다.