Button
원본: projects/skill-lens/design/components/Button/README.md
상태: Stable, 접근성 ✓, 다크 ✓, 코드 ✗
Primary, Secondary, Link, 상태
행동을 실행하는 버튼입니다. 원본은 8판 .b(보드맞춤 1판)와 .lk.
쓰는 곳
모든 화면.
구성(화면이 넘겨줄 것)
라벨, 누름 처리.
규칙
- 높이 48, 둥글기 12, 안쪽 24, 글자 16 700. 폰 아래 고정 주 버튼 56.
- 주 버튼(
sl-btn--primary): 먹색(action), 호버는 더 짙게(action-hover), 화면당 하나. 여정 버튼은 끝에 화살표(sl-btn__arrow, 호버에 3px). - 보조 버튼(
sl-btn--secondary): 흰 면 + 1px 테 + 먹색 글자. 호버는 보라 테 + 그림자. - 비활성: 같은 모양에 40% 흐리게, 이유를 근처에 씁니다.
- 링크(
sl-btn--link): 14 보라 밑줄, 조용한 링크는--quiet(회색). - 작은 버튼(
sl-btn--sm, 36)은 목록 행 안에서만. - 되돌릴 수 없는 마지막 행동 하나에만 빛 스침(
sl-btn--final). - 라벨은 명사형 2~4자, 숫자를 넣지 않습니다.
접근성
- 포커스 링 3px, offset 2px.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Actions" height=240 subtitle="Primary, Secondary, Link, 상태" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.wrap{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}.cap{font:500 12px/16px var(--font-sans);color:var(--ink-muted)}.card{padding:var(--space-4);background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}</style>
<div class="sl stack">
<div class="wrap"><button class="sl-btn sl-btn--primary">다음 <span class="sl-btn__arrow">→</span></button><button class="sl-btn sl-btn--secondary">이전</button><button class="sl-btn sl-btn--link">직접입력</button></div>
<div class="wrap"><button class="sl-btn sl-btn--primary sl-btn--sm">확인</button><button class="sl-btn sl-btn--secondary sl-btn--sm">확인</button><button class="sl-btn sl-btn--primary is-pressed">눌림</button><button class="sl-btn sl-btn--primary is-focus">포커스</button><button class="sl-btn sl-btn--primary" disabled>비활성</button></div>
<div style="max-width:320px"><button class="sl-btn sl-btn--secondary sl-btn--block">이메일 계속</button></div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.