---
{"id":"button","title":"버튼","category":"컴포넌트","order":30,"summary":"데이터 변경·실행·확정 동작의 사용·상태·접근성 계약.","status":"문서 기준 · UI 미검증","references":["components/button/usage"]}
---

# 버튼

## 목적과 사용

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

## 구성과 변형

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

## 동작 규칙

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

## 접근성

Enter/Space로 한 번만 실행되고 포커스가 보입니다. 비활성 이유는 버튼 밖에서도 읽을 수 있어야 합니다. 공통 [접근성 기준](accessibility.md)도 함께 적용합니다.

## 콘텐츠 예시

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

## 우리 구현과 연결

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

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

## 코드 계약 예시

다음은 의미 구조 설명용이며 운영 API에 연결된 완성 구현이 아닙니다.

```html
<button type="button" aria-describedby="restart-help">서버 재시작</button>
<p id="restart-help">연결된 사용자의 접속이 끊길 수 있습니다.</p>
```

## 상태와 검증

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

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