버튼
사용자가 행동을 실행할 때. 페이지 이동이면 버튼이 아니라 링크(.jt-link)입니다.
코드
<button class="jt-btn">저장</button>
<button class="jt-btn-ghost">취소</button>
<button class="jt-btn-danger">폐기</button>
<button class="jt-btn jt-btn-sm">작게</button>
<button class="jt-btn jt-btn-lg">크게</button>
<button class="jt-btn" disabled>비활성</button>
<!-- 저장 중 — 두 번 눌리는 사고를 막습니다 -->
<button class="jt-btn" data-loading="true">저장 중</button>하지 말 것
- 주 버튼을 파랑으로 만들지 마세요. 파랑은 ‘누를 수 있다’는 신호이고 브랜드 주색은 Charcoal입니다(2톤 규칙). 가장 흔한 일탈이며 브랜드가 즉시 흐려집니다.
- 고정
width금지. 번역 시 글자가 최대 7배까지 길어집니다(저장 → Enregistrer).--jt-btn-min-w를 쓰세요. jt-btn-danger를 ‘중요한 버튼’이라는 뜻으로 쓰지 마세요. 되돌릴 수 없는 동작에만 씁니다.
접근성
- 아이콘만 있는 버튼은
aria-label필수 —<button class="jt-icon-btn" aria-label="설정 열기"> - 최소 터치 44px는
--control-height(40px) + 주변 여백으로 확보하거나jt-btn-lg(48px) 사용 - 버튼 글자는 결과를 말합니다 — ‘저장’(○) / ‘제출’(△)
앱에서 모양 바꾸기
jt-utilities.css를 고치지 말고 아래 변수만 덮어쓰세요(컴포넌트 계약).
노브: --jt-btn-bg -fg -border -bg-hover -bg-active -min-w
.my-page .jt-btn { --jt-btn-bg: …; }