FNA Design System

버튼

한 화면에 주 버튼은 하나. 라벨은 결과가 예측되는 동사이며, 위험한 행동은 두 번 묻고, 시니어 모드에서는 64px 전체폭 하나로 커집니다.

정의

버튼은 누르면 무언가가 일어나는 요소입니다. 이동만 하는 것은 링크, 상태를 고르는 것은 선택(세그먼트·체크)이며 버튼이 아닙니다. 주(primary) · 보조(secondary) · 아웃라인 · 텍스트 · 위험 · 성공 · 검토, 7가지 강조 단계가 있고 크기는 sm/md/lg 세 가지입니다.

언제 쓰고 언제 쓰지 않나

강조쓴다쓰지 않는다
주 (primary)화면의 목적을 완성하는 행동 1개: 저장·제출·기록한 화면에 둘 이상 · 취소·닫기
보조 (secondary)주 행동 옆의 대안: 임시 저장·미리보기주 버튼 없이 단독
아웃라인표·카드 안의 조용한 행동: 상세·변경폼 제출
텍스트취소·닫기·더보기주요 행동
위험 (danger / danger-solid)되돌릴 수 없는 것: 반려·서명 삭제·연결 해제. solid 는 확인 모달 안에서만강조 목적 · 기본 상태의 목록
성공 · 검토결재 흐름의 승인·검토 완료 (결재 상태 색과 일치)결재 밖

해부도

  1. 컨테이너min-height 40(md) · 라운드 8 · 패딩 .55em 1.15em (em 이라 큰글씨에서 같이 커짐)
  2. 아이콘(선택) 20라벨 왼쪽, 간격 .4em. 아이콘만 있는 버튼은 --icon + aria-label
  3. 라벨13px 700 (lg 17px 800). 한 줄, 줄바꿈 없음, 2~6자
  4. 모서리sm 4 · md 8 · lg 12 — 높이 × 0.28 (심볼 비율)

변형

강조 단계
코드
<div class="fna-btn-group">
    <button class="fna-btn">기록 저장</button>
    <button class="fna-btn fna-btn--secondary">임시 저장</button>
    <button class="fna-btn fna-btn--outline">상세</button>
    <button class="fna-btn fna-btn--text">취소</button>
    <button class="fna-btn fna-btn--danger">반려</button>
    <button class="fna-btn fna-btn--danger-solid">서명 삭제</button>
    <button class="fna-btn fna-btn--success">승인</button>
    <button class="fna-btn fna-btn--review">검토 완료</button>
  </div>
크기 — sm 32 · md 40 · lg 48
코드
<div class="fna-btn-group">
    <button class="fna-btn fna-btn--sm">표 안 버튼</button>
    <button class="fna-btn">기본</button>
    <button class="fna-btn fna-btn--lg">큰 버튼</button>
    <button class="fna-btn fna-btn--icon" aria-label="새로고침"><svg class="icon-row" viewBox="0 0 24 24"><path d="M20 12a8 8 0 1 1-2.3-5.7"/><path d="M20 4v5h-5"/></svg></button>
  </div>
전체폭 · 시니어 (64px · 900 · 라운드 16)
코드
<div style="max-width:360px;display:flex;flex-direction:column;gap:12px">
    <button class="fna-btn fna-btn--block">기록 저장</button>
    <button class="fna-btn fna-btn--block" style="min-height:64px;font-size:24px;font-weight:900;border-radius:16px">기록 저장</button>
  </div>

상태

기본
호버
포커스
눌림
비활성
처리 중

비활성은 불투명도 .45 + pointer-events:none. 처리 중은 라벨을 "저장 중"으로 바꾸고 로더를 붙이며, 폭이 변하지 않도록 min-width 를 유지합니다. 비활성 버튼에는 왜 비활성인지 근처에 문장을 둡니다(예: "서명을 먼저 등록하세요").

치수

항목smmd (기본)lg시니어
최소 높이3240 (큰글씨 48)4864
글자12 / 70013 / 70017 / 80024 / 900
패딩.35em .8em.55em 1.15em.7em 1.4em전체폭
라운드481216
아이콘16202428
버튼 사이881212~16 (세로)
최소 폭(단독)—7296100%

Do · Don't

Do 주 버튼 하나, 나머지는 단계를 낮춘다
Don't 주 버튼 셋
Do 라벨은 결과가 보이는 동사
Don't 예/아니오 · 확인/취소만무엇을 확인하는지 버튼만 봐서는 모른다
→ 모달에서
Do 위험 solid 는 확인 단계에서만
Don't 목록 행마다 빨간 단색 버튼
Do 주 버튼은 오른쪽 끝(웹) · 아래 전체폭(폰)
Don't 주 버튼이 왼쪽 · 위치가 화면마다 다름

접근성

  • <button type="button">. 링크처럼 이동하면 <a class="fna-btn">. div 에 onclick 금지.
  • 포커스 링 2px --fna-focus, offset 2px (:focus-visible). 포커스 링을 제거하지 않는다.
  • 아이콘 버튼은 aria-label. 처리 중은 aria-busy="true" + disabled.
  • 대비: primary 위 흰 글자 10.4:1 · 아웃라인 글자 text-secondary 9.5:1 · 위험 error-on-container / error-container 6.5:1.
  • 터치 44 이상(sm 32 는 데스크톱 표 안에서만, 터치 화면에서는 md 이상).
  • 큰글씨 모드에서 최소 높이 48 로 자동 상향([data-scale=large] .fna-btn).

문구

상황라벨피할 것
기록 저장기록 저장 · 저장완료, OK, 등록하기
결재제출 (검토요청) · 검토 완료 · 최종 승인 · 반려승인하기, 컨펌
경보 처리확인 및 조치 기록처리, 닫기
파괴적서명 삭제 · 연결 해제삭제, 예
취소취소 (모달) · 닫기 (정보만 있을 때)아니오, 뒤로
처리 중저장 중 · 제출 중Loading…, 잠시만요

코드

<button type="button" class="fna-btn">기록 저장</button>
<button type="button" class="fna-btn fna-btn--secondary">임시 저장</button>
<button type="button" class="fna-btn fna-btn--outline fna-btn--sm">상세</button>
<button type="button" class="fna-btn fna-btn--text">취소</button>
<button type="button" class="fna-btn fna-btn--danger">반려</button>
<button type="button" class="fna-btn fna-btn--lg fna-btn--block">제출 (검토요청)</button>
<button type="button" class="fna-btn fna-btn--icon" aria-label="새로고침"><svg …/></button>
<button type="button" class="fna-btn" disabled aria-busy="true">저장 중</button>
<div class="fna-btn-group">…</div>   <!-- 형제 간격 8 -->
/* RN */ <Button variant="primary" size="lg">기록 저장</Button>   (src/ui/Button)

안정마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 components.css .fna-btnComponents · FNA 디자인 시스템 v1.0