Process Center 버튼 규약

프로세스센터의 액션 버튼은 모두 PortalButton(@hohyun94/portal-foundation)을 쓴다. 기준은 프로세스 관리 화면의 버튼이다. 새 화면·새 기능도 이 규약을 따른다.

액션 버튼

용도	규격
기본(저장·확인·추가·조회)	`<PortalButton variant="primary" size="sm">`
보조(취소·닫기·이전/다음·더 보기)	`<PortalButton variant="secondary" size="sm">` 또는 `outline`
외곽선 액션(내보내기·새로고침·재검사 등)	`<PortalButton variant="outline" size="sm">`
아이콘만 있는 액션	`<PortalButton variant="ghost" size="sm" aria-label="...">` + `icon`
파괴적 액션(삭제 등)	확인 절차와 함께 `variant="danger"` 또는 `ghost` + danger 색
폼 제출	`type="submit"` + `loading`
페이지 단위 주요 액션	`size="md"`(필요할 때만)

size="sm"은 프로세스 관리와 같은 규격이다.

editorial-button이나 화면 전용 배경·테두리·폰트를 가진 원시 <button>을 액션에 쓰지 않는다. 버튼 안의 글자를 임의로 굵게/모노체로 바꾸지 않는다 — 공통 버튼 토큰을 따른다.

아래는 액션이 아니라 선택·탐색·캔버스 조작이므로 원시 <button>을 유지할 수 있다. 대신 aria-label/aria-pressed 등 접근성 계약을 지킨다.

client/src/components/ButtonConvention.test.ts가 규약을 고정한다.