Components · 액션
Button (버튼)
브랜드 1차 액션 컴포넌트. Primary·Secondary·Ghost 3위계 + 전환 유도 전용 CTA(라임) 변형을 제공한다.
정의
사용자가 누르면 즉시 액션이 실행되는 컴포넌트다.
Anatomy
| 부위 | 토큰 |
|---|---|
| ① 컨테이너 | 패딩 --button-pad-y/--button-pad-x · 모서리 --button-radius(CTA는 --button-cta-radius 풀필) |
| ② 라벨 | --font-family-sans · 크기 --font-size-base · 굵기 --font-weight-bold(대비 확보, 접근성 참조) |
| ③ 아이콘(선택) | 라인 SVG, 라벨과 간격 --button-gap, stroke="currentColor" |
변형
| 변형 | 용도 |
|---|---|
| Primary | 화면의 주 액션(한 화면 1개) — 청록 필 + 흰 라벨 |
| Secondary | 보조 액션 — 투명 배경 + 청록 보더·라벨 |
| Ghost | 3차 액션·조밀한 UI — 배경·보더 없음 |
| CTA (라임) | 전환 유도 지점 전용(히어로·뒷표지) — 라임 필 + 네이비 라벨, 풀 라운드 |
상태
| 상태 | Primary | Secondary | Ghost | CTA |
|---|---|---|---|---|
| Default | bg --button-primary-bg / fg --button-primary-fg | border --button-secondary-border / fg --button-secondary-fg | fg --button-ghost-fg | bg --button-cta-bg / fg --button-cta-fg |
| Hover | bg --button-primary-bg-hover | bg --button-secondary-bg-hover | bg --button-ghost-bg-hover | filter: brightness(0.92) |
| Active | bg --button-primary-bg-active | — | — | — |
| Focus | box-shadow: var(--focus-ring) (4변형 공통) | 동일 | 동일 | 동일 |
| Disabled | opacity: var(--button-disabled-opacity) + cursor: not-allowed (4변형 공통) | 동일 | 동일 | 동일 |
Do / Don't
Do
- 한 화면에 Primary는 1개만 — 주 액션이 무엇인지 시선이 바로 가게 한다.
- CTA(라임)는 전환 유도 지점(히어로·뒷표지·가격 안내 끝)에만 아껴 쓴다.
- 아이콘을 쓰면 라벨과 함께 쓴다(아이콘 단독 버튼은
aria-label필수 + Tooltip 참조).
Don't
- Primary를 여러 개 나란히 두지 말 것 — 위계가 무너진다.
- 라벨을 14px 이하로 줄인 채 청록 필을 유지하지 말 것 — 대비 미달(접근성 참조).
- 링크로 이동하는 요소를 버튼처럼 꾸미지 말 것 — 이동은 Link, 실행은 Button.
콘텐츠 규칙
- 라벨은 동사형으로 끝낸다: "견적 요청하기", "카탈로그 받기" (명사 단독 "견적" ✗).
- 길이는 2~4어절, 줄바꿈 없이 한 줄. 말줄임표(…) 금지.
- 이중 부정 금지("취소 안 함" ✗ → "유지하기").
- 조사 오류·띄어쓰기는 발행 전 점검(전역 규칙:
../guidelines/ux-writing.md).
키보드 인터랙션
| 키 | 동작 |
|---|---|
Tab | 버튼으로 포커스 이동(포커스 링 표시) |
Enter / Space | 버튼 실행 |
접근성
- 네이티브
<button>요소를 쓴다(<div role="button">지양) — 키보드·스크린리더 기본 지원. - 대비: 흰 라벨 on 청록(#069CBB) ≈ 3.0:1 → "큰 텍스트" 기준으로만 통과. 그래서 기본 라벨 = 16px·bold(700). 라벨을 더 작게 써야 하면 필을
--color-teal-700(흰 라벨 ~4.9:1, AA)으로 바꾼다. - 포커스 링 제거 금지(
:focus-visible+--focus-ring), 히트영역 ≥--target-min(44px — 패딩 기본값으로 충족). - 비활성은
disabled속성(스타일만 흐리게 하지 말 것). 기준:../guidelines/accessibility.md.
코드
html
<button class="pi-button" type="button">견적 요청하기</button>
<button class="pi-button pi-button--secondary" type="button">카탈로그 받기</button>
<button class="pi-button pi-button--ghost" type="button">자세히 보기</button>
<button class="pi-button pi-button--cta" type="button">디자인구독 시작하기</button>
<button class="pi-button" type="button" disabled>견적 요청하기</button>css
.pi-button {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--button-gap);
padding: var(--button-pad-y) var(--button-pad-x);
border: var(--border-medium) solid transparent;
border-radius: var(--button-radius);
background: var(--button-primary-bg);
color: var(--button-primary-fg);
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
line-height: var(--font-lh-normal);
letter-spacing: var(--font-ls-normal);
min-height: var(--target-min);
cursor: pointer; word-break: keep-all;
transition: background var(--duration-base) var(--easing-out),
color var(--duration-base) var(--easing-out),
filter var(--duration-base) var(--easing-out);
}
.pi-button:hover { background: var(--button-primary-bg-hover); }
.pi-button:active { background: var(--button-primary-bg-active); }
.pi-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pi-button:disabled { opacity: var(--button-disabled-opacity); cursor: not-allowed; }
.pi-button--secondary {
background: transparent;
border-color: var(--button-secondary-border);
color: var(--button-secondary-fg);
}
.pi-button--secondary:hover { background: var(--button-secondary-bg-hover); }
.pi-button--ghost { background: transparent; color: var(--button-ghost-fg); }
.pi-button--ghost:hover { background: var(--button-ghost-bg-hover); }
.pi-button--cta {
background: var(--button-cta-bg);
color: var(--button-cta-fg);
border-radius: var(--button-cta-radius);
}
.pi-button--cta:hover { background: var(--button-cta-bg); filter: brightness(0.92); }
@media (prefers-reduced-motion: reduce) {
.pi-button { transition: none; }
}Changelog
| 날짜 | 변경 |
|---|---|
| 2026-07-15 | 문서 계약(10섹션) 적용 — Anatomy 도해·콘텐츠 규칙·키보드·코드 신설, 기존 규격 승계. 라벨 기본 16px·700로 대비 기준 코드 반영 |