Components · Action

Button

사용자가 클릭하는 모든 액션의 출발점. 컨텍스트(밝은/어두운 BG)에 따라 색을, 위계에 따라 변종을 선택합니다. 사이즈는 padding 변형으로.

Preview

Sizes — light BG

Variants — light BG

Dark BG context — use .btn-sky

Usage

<!-- Light BG -->
<button class="btn btn-primary">기본</button>
<button class="btn btn-primary btn-lg">큰 버튼</button>
<button class="btn btn-ghost">고스트</button>

<!-- Dark BG (primary / dark-blue / ink-deep) -->
<button class="btn btn-sky">어두운 BG 위 CTA</button>

Rules

DO

밝은 BG (canvas · light-grey) → .btn-primary
어두운 BG (primary · dark-blue · ink-deep) → .btn-sky
100% 너비 필요 시 .btn-block

DON'T

같은색 BG + 같은색 버튼 금지 (예: primary BG에 .btn-primary)
ink-deep BG 위 .btn-primary 금지 — 대비 부족
버튼 폰트 크기 임의 변경 금지 — 16px 토큰만