WickedHost Design System / 컴포넌트

버튼

데이터 변경·실행·확정 동작을 위한 컴포넌트.

WickedHost 공통 확정 기준: vPanel/Pterodactyl 디자인을 Blesta까지 동일 적용. 문서·예제 기준이며 운영 서비스 배포와는 별도입니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.

실행형 예제
Primary
Secondary
Danger
Disabled
Loading
버튼에 마우스를 올리거나 Tab 키로 포커스를 확인해 보세요.
WickedHost 공통 기준 · vPanel/Pterodactyl 기반예시 데이터 · API 미연결

목적과 사용

데이터 변경·실행·확정 동작에 사용합니다. 새 페이지로 이동할 때는 링크를 사용합니다.

구성과 변형

라벨, 선택적 아이콘, 실행 상태. 변형의 외형은 각 제품의 기존 토큰을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.

동작 규칙

  • BTN-01 SHOULD: 한 작업 영역에서 가장 중요한 행동 하나를 primary로 강조합니다. 독립 작업 영역의 예외는 명시합니다.
  • BTN-02 MUST: 비동기 실행 중 중복 제출을 막고 진행·실패·성공을 구분합니다.
  • BTN-03 MUST: 삭제·재설치 버튼은 대상을 명시하고 파괴적 작업 확인 규칙을 따릅니다.
  • BTN-04 MUST: 일반 폼 내부의 보조 버튼에는 type=button을 명시합니다.

콘텐츠 예시

좋음: ‘서버 재시작’ / 피함: 동작을 알 수 없는 ‘확인’.

우리 구현과 연결

VPS Button.tsx는 variant outline/filled, color success/danger/accent, loading을 선언합니다. 이 문서 뷰어의 Button API와 다릅니다.

제품별 소유 경로는 WICKEDVPS, Panel, Blesta와 소스 근거를 확인합니다. 코드 존재와 모든 사용처의 준수는 다르며, 별도 표시가 없는 제품별 준수 상태는 미검증입니다.

상태와 검증

빠른 두 번 클릭·Enter 연속 입력·지연·실패 후 재시도를 검사합니다.

일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. 검증 체크리스트에 증거를 연결합니다.

출처와 적용 범위

원본 확인 범위와 운영 적용 여부를 구분합니다. 실행형 예제의 동작 확인은 모든 운영 화면의 접근성 검증을 의미하지 않습니다.

Markdown 원본 다운로드